table標簽

Eagle89 2017-07-17

展開全文

table標簽，認識網頁上的表格

有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下代碼：

創(chuàng)建表格的四個元素：

table、tbody、tr、th、td

1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結構， tbody包含行的內容下載完優(yōu)先顯示，不必等待表格結束后在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格加載完后顯示。）

3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。

4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

5、<th>…</th>：表格的頭部的一個單元格，表格表頭。

6、表格中列的個數，取決于一行中數據單元格的個數。

上述代碼在瀏覽器中顯示的默認的樣式為：

總結：

1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的

2、表頭，也就是th標簽中的文本默認為粗體并且居中顯示

任務

我來試試：為數學成績表添加一行內容

1、在右部編輯器中的第25-29行輸入下列代碼：

25.<tr>

26. <td>三班</td>

27. <td>32</td>

28. <td>80</td>

29.</tr>

結果圖：

示范：

代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>認識table表標簽</title>
</head>
<body>
<table>
<tbody>
    <tr>
      <th>班級</th>
      <th>學生數</th>
      <th>平均成績</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>