上面幾節課我們學習了如下標簽:table標簽(表格)、tr標簽(行)、td標簽(標准單元格)、caption標簽(標題)、th標簽(表頭單元格)。
為了更深一層對表格進行語義化,HTML引入了thead、tbody和tfoot這三個標簽。這三個標簽把表格分為三部分:表頭、表身、表腳。有了這三個標簽,表格HTML代碼語義更加良好,結構更加清晰。
語法:
<table> <caption>表格標題</caption> <!--表頭--> <thead> <tr> <th>表頭單元格1</th> <th>表頭單元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>標准單元格1</td> <td>標准單元格2</td> </tr> <tr> <td>標准單元格1</td> <td>標准單元格2</td> </tr> </tbody> <!--表腳--> <tfoot> <tr> <td>標准單元格1</td> <td>標准單元格2</td> </tr> </tfoot> </table>
說明:
<thead>、<tbody>和<tfoot>這三個標簽也是表格中非常重要的標簽,它在語義上區分了表頭、表身、表腳。很多人容易忽略這三個標簽。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table> <caption>考試成績表</caption> <thead> <tr> <th>姓名</th> <th>語文</th> <th>英語</th> <th>數學</th> <tr> </thead> <tbody> <tr> <td>小明</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>小紅</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>小傑</td> <td>100</td> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td>平均</td> <td>90</td> <td>90</td> <td>90</td> </tr> </tfoot> </table> </body> </html>
在浏覽器預覽效果如下:
分析:
頁腳往往都是用於統計數據。默認情況下,表格是沒有邊框的。我們加入邊框是讓讀者更清楚地看到表格結構。
很多人問,對於表格來說,thead、tbody、tfoot這3個標簽加了跟沒加時的顯示效果都一樣呀?確實,我作為新手的時候也有過這個疑問。但是加了之後讓你的代碼更具有邏輯性。為什麼大神寫的代碼往往就跟一般人的水平相比,連代碼都是那麼清晰自然呢?大家想想就知道了。當然,還有一點就是:HTML語義結構極其重要,特別是針對搜索引擎。這些重要的細節,你是在一般書籍裡找不到的。
總結1、表格完整結構如下:
有興趣的朋友,可以查看 學習網教程中表格方面的源代碼,其實你會發現,站長正是使用完整的表格結構來編寫代碼的。