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

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

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

創建表格的四個元素：

table、tbody、tr、th、td

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

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，不必等待表格結束後在顯示，同時如果表格很長，用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>

結果圖：

代碼

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