6-2 表格框線的border屬性

在HTML4.01時(shí)代，當(dāng)不指定border的值時(shí)所呈現(xiàn)的表格是沒(méi)有框線的，HTML程序設(shè)計(jì)師就利用這個(gè)特性進(jìn)行網(wǎng)頁(yè)排版。6-1節(jié)程序?qū)嵗谋砀癫缓蚓€，其實(shí)只要將border屬性設(shè)為1，同時(shí)放在<table>元素內(nèi)就可以為表格建立框線，使用方法如下：

另外，border也可以取任一數(shù)值，這個(gè)數(shù)值所指的是外框線的寬度。不過(guò)，HTML5語(yǔ)意上不用此方法設(shè)計(jì)外框線寬度，而是使用CSS3。

程序?qū)嵗齝h6_2.html：增加表格的框線，重新設(shè)計(jì)ch6_1.html。

執(zhí)行結(jié)果

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

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

在默認(rèn)環(huán)境下，表頭內(nèi)的數(shù)據(jù)將以粗體顯示，同時(shí)在單元格內(nèi)居中對(duì)齊。

程序?qū)嵗齝h6_3.html：為表格建立表頭，重新設(shè)計(jì)ch6_2.html。

執(zhí)行結(jié)果

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

上一節(jié)的程序雖然已很清楚地表達(dá)了表格的設(shè)計(jì)邏輯，但是當(dāng)我們?cè)诒砀裰性黾恿?lt;thead>元素定義表頭時(shí)，習(xí)慣也會(huì)使用<tbody>定義表格的本體，這樣整個(gè)程序設(shè)計(jì)起來(lái)會(huì)更明確。此時(shí)整個(gè)表格設(shè)計(jì)的格式如下：

程序?qū)嵗齝h6_4.html：使用<tbody>定義表格的本體，使程序更清楚明確。

執(zhí)行結(jié)果

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

在建立表格時(shí)，有時(shí)候需要使用表尾<tfoot>元素做一份整體表格的注記。將表尾應(yīng)用在表格設(shè)計(jì)時(shí)，使用的格式如下：

程序?qū)嵗齝h6_5.html：以增加表尾方式建立表格。

執(zhí)行結(jié)果

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

在上一節(jié)的實(shí)例中，我們?cè)诒砦仓兄辉O(shè)計(jì)了一個(gè)單元格，其實(shí)這不是好的設(shè)計(jì)，整體不一致，同時(shí)感覺(jué)怪怪的。通常我們?cè)谠O(shè)計(jì)這類表格時(shí)，可以使用colspan屬性，直接將整行單元格合并，再將單元格原先內(nèi)容寫入此合并的單元格內(nèi)。如果將colspan屬性放在定義表格本體的單元格<td>元素時(shí)，此時(shí)使用如下格式：

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

上述n代表合并單元格的個(gè)數(shù)。

程序?qū)嵗齝h6_6.html：以合并單元格方式重新設(shè)計(jì)ch6_5.html。

執(zhí)行結(jié)果

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

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

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

另外，在表頭的單元格內(nèi)放置colspan屬性時(shí)，所輸入的內(nèi)容將自動(dòng)居中對(duì)齊。

程序?qū)嵗齝h6_7.html：擴(kuò)充ch6_6.html，以合并單元格的觀念應(yīng)用在表格表頭，同時(shí)在此輸入“聯(lián)合國(guó)水資源中心”。

執(zhí)行結(jié)果

上述第10行是設(shè)定將3個(gè)單元格合并，然后在合并后的單元格中輸入“聯(lián)合國(guó)水資源中心”。