目錄

添加表格頭部信息與腳部信息

昨天我們在《使用HTML添加表格1（基本元素）——零基礎自學網頁製作》中學習了如何向網頁中添加基礎表格，今天我們來學習如何為基礎表格添加表頭和表腳信息。先看看效果吧。

老規矩，先介紹表頭和表腳的標籤。

表頭：<thead></thead>

這個標籤只是告訴頁面這裡是表頭，如果添加文字的話還需要<tr></tr>列標籤和<td></td>行標籤。

如果要添加表頭的話，直接在代碼中添加這個標籤是不行的，我們還需要將其他表格內容放置到<tbody></tbody>中，這樣html才能知道哪裡是表格內容，哪裡是表頭內容。

示例代碼如下所示：

<table border = "1" width = "100%">
<thead><!--表頭開始標籤-->
<tr>
<td>
表格的頭部信息
</td>
</tr>
</thead><!--表頭結束標籤-->
<tbody><!--表格內容開始標籤-->
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody><!--表格內容結束標籤-->
</table>

代碼效果如圖：

大家通過觀察發現，表格的標題標籤<caption></caption>雖然寫在<tbody></tbody>裡面，但是顯示的時候，卻一直在表格的最上面。

合併單元格操作：我們希望表頭信息能夠在表格中獨占一列，這樣就需要介紹如何修改<td></td>行標籤中的colspan屬性。

示例代碼如下：

<thead><!--表頭開始標籤-->
<tr>
<td colspan = "2">
表格的頭部信息
</td>
</tr>
</thead><!--表頭結束標籤-->

修改後效果如下：

colspan的意思就是「列合併」，col是column（列、縱隊）的縮寫，span是跨度的意思。

colspan就是為<td></td>列標籤指定跨越幾個列向單元格。

這裡我們要合併兩個，故colspan=「2」，2一定要用半角引號引起來！

那合併行單元格的屬性是什麼呢？其實反推一下也能猜出。行的英文是row，因此rowspan就是「行合併」。

代碼示例如下：我們把「一行一列」和「二行一列」縱向合併。

<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>

效果如圖所示：

大家注意，如果您合併成了「一行一列」，那就要把「二列一行」刪掉。

最後，我們來寫一下表格的腳部信息。

腳部標籤如下：<tfoot></tfoot>

使用方法和<thead></thead>一樣，在中間添加列行標籤來顯示內容。

同時也要給<td></td>行標籤進行列向合併單元格，即添加colspan=「2」。

示例代碼如下：

<tfoot>
<tr>
<td colspan = "2">
表格的腳部信息
</td>
</tr>
</tfoot>

值得注意的是：這塊代碼的位置在<thead></thead>之後，<tbody></tbody>之前。

示例代碼如下：

<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "2">
表格的頭部信息
</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "2">
表格的腳部信息
</td>
</tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>
</tbody>
</table>

頁面效果如下：

今天的內容結束了。明天我們繼續講解列表元素的其他屬性。

喜歡的小夥伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

疫情期間，請大家少出門，不聚會，沒事在家學學網頁製作，即抗擊疫情又提高自己!