在 HTML 中，我們使用 <table> 標(biāo)簽來定義表格蘑秽。HTML 中的表格和 Excel 中的表格是類似的饺著，都包括行、列肠牲、單元格幼衰、表頭等元素。但是 HTML 表格在功能方面遠(yuǎn)沒有 Excel 表格強(qiáng)大缀雳，HTML 表格不支持排序渡嚣、求和、方差等數(shù)學(xué)計(jì)算肥印，它一般用來展示數(shù)據(jù)识椰。
在學(xué)習(xí)表格之前，我們不妨先來看一段簡(jiǎn)單的 HTML 代碼：
1. <table border="1">
2. <tr>
3. <th>名稱</th>
4. <th>官網(wǎng)</th>
5. <th>性質(zhì)</th>
6. </tr>
7. <tr>
8. <td>C語言中文網(wǎng)</td>
9. <td>http://c.biancheng.net/</td>
10. <td>教育</td>
11. </tr>
12. <tr>
13. <td>百度</td>
14. <td>http://www.baidu.com/</td>
15. <td>搜索</td>
16. </tr>
17. <tr>
18. <td>當(dāng)當(dāng)</td>
19. <td>http://www.dangdang.com/</td>
20. <td>圖書</td>
21. </tr>
22. </table>
運(yùn)行效果如下圖：
這是一個(gè) 4 行 3 列的表格深碱。第一行為表頭腹鹉，其余三行為內(nèi)容。
在上述代碼中莹痢，我們使用了<table>种蘸、<tr>、<td> 及 <th> 四個(gè)標(biāo)簽：
- <table> 表示表格竞膳，表格的所有內(nèi)容需要寫在 <table> 和 </table> 之間。
- <tr> 是 table row 的簡(jiǎn)稱诫硕，表示表格的行坦辟。表格中有多少個(gè) <tr> 標(biāo)簽就表示有多少行數(shù)據(jù)。
- <td> 是 table datacell 的簡(jiǎn)稱章办，表示表格的單元格锉走，這才是真正存放表格數(shù)據(jù)的標(biāo)簽。單元格的數(shù)據(jù)可以是文本藕届、圖片挪蹭、列表、段落休偶、表單梁厉、水平線、表格等多種形式踏兜。
- <th> 是 table heading 的簡(jiǎn)稱词顾，表示表格的表頭。<th> 其實(shí)是 <td> 單元格的一種變體碱妆，本質(zhì)上還是一種單元格肉盹。<th> 一般位于第一行，充當(dāng)每一列的標(biāo)題疹尾。大多數(shù)的瀏覽器會(huì)把表頭顯示為粗體居中的文本上忍。
默認(rèn)情況下骤肛，表格是沒有邊框的。但是我們可以使用 <table> 標(biāo)簽中的 border 屬性來設(shè)置表格的邊框?qū)挾惹侠叮瑔挝皇窍袼兀╬x）萌衬。本例中我們將表格的邊框?qū)挾仍O(shè)置為 1px。注意它抱，px 是默認(rèn)的單位秕豫，不用顯式指明。
1. 表格的邊框合并：
細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了观蓄，網(wǎng)頁中常見的表格樣式大多為單層邊框混移，上例中展示的表格為雙層邊框。為了避免這種情況侮穿，我們可以利用 CSS 中的 border-collapse 屬性來設(shè)置表格的邊框歌径。border-collapse 是“邊框塌陷”的意思，當(dāng)屬性值為 collapse 時(shí)亲茅，可以使表格的雙邊框變?yōu)閱芜吙颉?/p>
示例代碼如下：
1. <table border="1" style="border-collapse: collapse;">
2. <tr>
3. <th>名稱</th>
4. <th>官網(wǎng)</th>
5. <th>性質(zhì)</th>
6. </tr>
7. <tr>
8. <td>C語言中文網(wǎng)</td>
9. <td>http://c.biancheng.net/</td>
10. <td>教育</td>
11. </tr>
12. <tr>
13. <td>百度</td>
14. <td>http://www.baidu.com/</td>
15. <td>搜索</td>
16. </tr>
17. <tr>
18. <td>當(dāng)當(dāng)</td>
19. <td>http://www.dangdang.com/</td>
20. <td>圖書</td>
21. </tr>
22. </table>
運(yùn)行效果如下圖所示：
2. 表格的標(biāo)題
HTML 允許使用 <caption> 標(biāo)簽來為表格設(shè)置標(biāo)題回铛，標(biāo)題用來描述表格的內(nèi)容。
我們常見的表格一般都有標(biāo)題克锣，表格的標(biāo)題使用 <caption> 標(biāo)簽來表示茵肃。默認(rèn)情況下，表格的標(biāo)題位于整個(gè)表格的第一行并且居中顯示袭祟。一個(gè)表格只能有一個(gè)標(biāo)題验残，也就是說 <table> 標(biāo)簽中只能有一個(gè) <caption> 標(biāo)簽。
請(qǐng)看下面的例子：
1. <table border="1" style="border-collapse: collapse;">
2. <caption>這是表格的標(biāo)題</caption>
3. <tr>
4. <th>名稱</th>
5. <th>官網(wǎng)</th>
6. <th>性質(zhì)</th>
7. </tr>
8. <tr>
9. <td>C語言中文網(wǎng)</td>
10. <td>http://c.biancheng.net/</td>
11. <td>教育</td>
12. </tr>
13. <tr>
14. <td></td>
15. <td>http://www.baidu.com/</td>
16. <td>搜索</td>
17. </tr>
18. <tr>
19. <td>當(dāng)當(dāng)</td>
20. <td>http://www.dangdang.com/</td>
21. <td>圖書</td>
22. </tr>
23. </table>
瀏覽器運(yùn)行結(jié)果如圖：
3. 單元格的合并
和 Excel 類似巾乳，HTML 也支持單元格的合并您没，包括跨行合并和跨列合并兩種。
- rowspan：表示跨行合并胆绊。在 HTML 代碼中氨鹏，允許我們使用 rowspan 特性來表明單元格所要跨越的行數(shù)。
- colspan：表示跨列合并压状。同樣的仆抵，在 HTML 中，允許我們使用 colspan 特性來表明單元格所要跨越的列數(shù)何缓。
具體格式如下：
<td rowspan="n">單元格內(nèi)容</td>
<td colspan="n">單元格內(nèi)容</td>
n 是一個(gè)整數(shù)肢础，表示要合并的行數(shù)或者列數(shù)。
此處需注意碌廓，不論是 rowspan 還是 colspan 都是 <td> 標(biāo)簽的屬性传轰。
下面的例子中，我們將表格第 1 列的第 3谷婆、4 行單元格合并（跨行合并）慨蛙，將第 4 行的第 2辽聊、3 列合并（跨列合并）。具體代碼如下：
1. <table border="1" style="border-collapse: collapse;">
2. <tr>
3. <th>名稱</th>
4. <th>官網(wǎng)</th>
5. <th>性質(zhì)</th>
6. </tr>
7. <tr>
8. <td>C語言中文網(wǎng)</td>
9. <td>http://c.biancheng.net/</td>
10. <td>教育</td>
11. </tr>
12. <tr>
13. <td rowspan="2">百度</td>
14. <td>http://www.baidu.com/</td>
15. <td>搜索</td>
16. </tr>
17. <tr>
18. <td colspan="2">http://www.dangdang.com/</td>
19. </tr>
20. </table>
運(yùn)行效果如圖：
通過運(yùn)行結(jié)果可以發(fā)現(xiàn)：
- rowspan 屬性表示向下合并單元格期贫，colspan 屬性表示向右合并單元格跟匆。
- 每次合并 n 個(gè)單元格都要少寫 n-1 個(gè)<td>標(biāo)簽。
提示：即使一個(gè)單元格中沒有任何內(nèi)容通砍，我們?nèi)孕枋褂?<td> 或 <th> 元素來表示一個(gè)空單元格的存在玛臂，建議在 <td> 或 <th> 中加入 ?（空格），否則低版本的 IE 可能無法顯示出這個(gè)單元格的邊框封孙。
