# 第 6 章 表格元素 學習要點： 1.表格元素總匯 2.構建表格解析 主講教師：李炎恢 本章主要探討 HTML5?中表格元素的用法。表格的主要用途是以網格的形式顯示二維數據。 **一．表格元素總匯** 表格的基本構成最少需要三個元素：&lt;table&gt;、&lt;tr&gt;、&lt;td&gt;，其他的一些作為可選輔助存在。 | **元素名稱** | **說明** | | --- | --- | | table | 表示表格 | | thead | 表示標題行 | | tbody | 表示表格主體 | | tfoot | 表示表腳 | | tr | 表示一行單元格 | | th | 表示標題行單元格 | | td | 表示單元格 | | col | 表示一列 | | colgroup | 表示一組列 | | caption | 表示表格標題 | **二．構建表格解析** **1.&lt;table&gt;&lt;tr&gt;&lt;td&gt;構建基礎表格** ``` <table border="1"> <tr> <td>張三</td> <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </table> ``` 解釋：&lt;table&gt;元素表示一個表格的聲明，&lt;tr&gt;元素表示表格的一行，&lt;td&gt;元素表示一個單元格。默認情況下表格是沒有邊框的，所以，在&lt;table&gt;元素增加一個 border?屬性，設置為 1?即可顯示邊框。 **2.&lt;th&gt;為表格添加標題單元格** ``` <table border="1" style="width:300px;"> <tr> <th>姓名</th> <th>性別</th> <th>婚姻</th> </tr> <tr> <td>張三</td> <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </table> ``` 解釋：&lt;th&gt;元素主要是添加標題行的單元格，實際作用就是將內部文字居中且加粗。這里使用了一個通用屬性 style，主要用于 CSS?樣式設置，以后會涉及到。&lt;th&gt;&lt;td&gt;均屬于單元格，包含兩個合并屬性：colspan、rowspan?等。 **3.&lt;thead&gt;添加表頭** ``` <thead> <tr> <th>姓名</th> <th>性別</th> <th>婚姻</th> </tr> </thead> ``` 解釋：&lt;thead&gt;元素就是限制和規范了表格的表頭部分。尤其是以后動態生成表頭，它的位置是不固定的，使用此元素可以限定在開頭位置。 **4.&lt;tfoot&gt;添加表腳** ``` <tfoot> <tr> <td colspan="3">統計：共兩名</td> </tr> </tfoot> ``` 解釋：&lt;tfoot&gt;元素為表格生成表腳，限制在表格的底部。 **5.&lt;tbody&gt;添加表主體** ``` <tbody> <tr> <td>張三</td> <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </tbody> ``` 解釋：&lt;tbody&gt;元素主要是包含住非表頭表腳的主體部分，有助于表格格式的清晰，更加有助于后續 CSS?和 JavaScript?的控制。 **6.&lt;caption&gt;添加表格標題** ``` <caption>這是一個人物表</caption> ``` 解釋：&lt;caption&gt;元素給表格添加一個標題。 **7.&lt;colgroup&gt;設置列** ``` <colgroup span="2" style="background:red;"> ``` 解釋：&lt;colgroup&gt;元素是為了處理某個列，span?屬性定義處理哪些列。1?表示第一列， 2 表示前兩列。如果要單獨設置第二列，那么需要聲明兩個，先處理第一個，將列點移入第二位，再處理第二個即可。 **8.&lt;col&gt;更靈活的設置列**? ``` <colgroup> <col> <col style="background:red;" span="1"> </colgroup> ``` 解釋：&lt;col&gt;元素表示單獨一列，一個表示一列，控制更加靈活。如果設置了 span?則，控制多列。