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