6-2 表格框線的border屬性

在HTML4.01時代，當不指定border的值時所呈現的表格是沒有框線的，HTML程序設計師就利用這個特性進行網頁排版。6-1節程序實例的表格不含框線，其實只要將border屬性設為1，同時放在<table>元素內就可以為表格建立框線，使用方法如下：

另外，border也可以取任一數值，這個數值所指的是外框線的寬度。不過，HTML5語意上不用此方法設計外框線寬度，而是使用CSS3。

程序實例ch6_2.html：增加表格的框線，重新設計ch6_1.html。

執行結果

6-3 建立表頭<thead>和<th>元素

HTML使用<thead>元素建立表頭（也可稱為表格的標題行），在表頭內則使用<th>定義表頭的單元格，這兩個元素配合<table>使用格式如下：

在默認環境下，表頭內的數據將以粗體顯示，同時在單元格內居中對齊。

程序實例ch6_3.html：為表格建立表頭，重新設計ch6_2.html。

執行結果

6-4 建立表格本體<tbody>元素

上一節的程序雖然已很清楚地表達了表格的設計邏輯，但是當我們在表格中增加了<thead>元素定義表頭時，習慣也會使用<tbody>定義表格的本體，這樣整個程序設計起來會更明確。此時整個表格設計的格式如下：

程序實例ch6_4.html：使用<tbody>定義表格的本體，使程序更清楚明確。

執行結果

6-5 建立表尾<tfoot>元素

在建立表格時，有時候需要使用表尾<tfoot>元素做一份整體表格的注記。將表尾應用在表格設計時，使用的格式如下：

程序實例ch6_5.html：以增加表尾方式建立表格。

執行結果

6-6 合并橫向單元格colspan屬性

在上一節的實例中，我們在表尾中只設計了一個單元格，其實這不是好的設計，整體不一致，同時感覺怪怪的。通常我們在設計這類表格時，可以使用colspan屬性，直接將整行單元格合并，再將單元格原先內容寫入此合并的單元格內。如果將colspan屬性放在定義表格本體的單元格<td>元素時，此時使用如下格式：

    <tr><td colspan="n"> … </td></tr>

上述n代表合并單元格的個數。

程序實例ch6_6.html：以合并單元格方式重新設計ch6_5.html。

執行結果

上述第18行設定將3個單元格合并，然后在合并后的單元格輸入“制表2017年5月30日”。

合并單元格的功能也可以應用在表格的表頭，如果將colspan屬性放在定義表格表頭的單元格<th>元素時，此時使用如下格式：

    <tr><th colspan="n"> … </th></tr>

另外，在表頭的單元格內放置colspan屬性時，所輸入的內容將自動居中對齊。

程序實例ch6_7.html：擴充ch6_6.html，以合并單元格的觀念應用在表格表頭，同時在此輸入“聯合國水資源中心”。

執行結果

上述第10行是設定將3個單元格合并，然后在合并后的單元格中輸入“聯合國水資源中心”。