第 6 章 表格元素

水之原發表於2016-04-26

學習要點：

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 則，控制多列。

 

相關文章