HTML學習7：常用標簽之表格標簽 · Web前端HTML+CSS+JS初級入門

HTML標記語言中可以使用table標簽創建表格。表格標簽列表： ![](https://box.kancloud.cn/2016-04-28_5721558877f1c.jpg) 表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義)，每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data)，即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 ### 一，邊框屬性boder 如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。不使用邊框屬性制作一個表格和使用邊框屬性來顯示一個帶有邊框的表格： ~~~ <span style="font-size:18px;"><html> <head> <title>表格標簽演示</title> </head> <body> <h2>無邊框的表格</h2> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h2>有邊框的表格</h2> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> </span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215588886a2.jpg) ### 二，表格的表頭表格的表頭使用 < th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本： ~~~ <span style="font-size:18px;"><html> <head> <title>表格標簽演示</title> </head> <body> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> </span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558898a5b.jpg) ### 三，表格中的空單元格在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。這個空的單元格的邊框沒有被顯示出來。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。 ~~~ <span style="font-size:18px;"><html> <head> <title>表格標簽演示</title> </head> <body> <h2>沒有內容的單元格顯示：</h2> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table> <h2>沒有內容的單元格，用空格字符代替的單元格顯示：</h2> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>?</td> <td>row 2, cell 2</td> </tr> </table> </body> </html></span> ~~~ IE8.0顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215588a90d1.jpg) Chrome瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215588ba822.jpg) ### 四，帶有標題和跨行或跨列的表格 ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格標簽演示</title> </head> <body> <table border="1" width="500" cellpadding="10" cellspacing="1" bordercolor="#33FF00"> <caption>表格標題</caption> <tr> <td><div align="center">姓名</div></td> <td><div align="center">張三</div></td> </tr> <tr> <td><div align="center">年齡</div></td> <td><div align="center" class="STYLE1">30</div></td> </tr> </table> <hr /> <table border="1" width="500" cellpadding="10" cellspacing="1" bordercolor="#33FF00" > <caption>表格標題</caption> <tr> <td colspan="2"><div align="center">個人信息</div></td> </tr> <tr> <td bgcolor="#00FFFF"><div align="center">張三</div></td> <td><div align="center">30</div></td> </tr> </table> <hr /> <table border="1" width="500" cellpadding="10" cellspacing="1" bordercolor="#33FF00" > <caption>表格標題</caption> <tr> <td rowspan="2"><div align="center">個人信息</div></td> <td><div align="center">張三</div></td> </tr> <tr> <td><div align="center">30</div></td> </tr> </table> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215588cfc94.jpg) 表中格標簽中還可以嵌套其他標簽，也可以進行各種花式的設計，背景色或背景圖片等。也可以在表格排列數據內容。在表格標簽列表中的后五個標簽可以增加更豐富的表格設計。