關於html表格結構標籤thead，tfoot，tbody使用出現不相容性
阿新 • • 發佈：2019-01-07
關於儘量不使用thead，tfoot，tbody這三個表格結構標籤，存在瀏覽器相容性問題的驗證
以下是不使用這三個標籤時程式碼demo以及執行效果（搜狗瀏覽器下執行）：
<body> <table width="700" height="150" border="1"> <caption>表格標籤的相容性問題</caption> <tr> <td width="98">頁首1</td> <td width="87">頁首2</td> <td width="137">頁首3</td> <td width="80">頁首4</td> </tr> <tr> <td>頁尾1</td> <td>頁尾2</td> <td>頁尾3</td> <td>頁尾4</td> </tr> <tr> <td>表主體內容1</td> <td>表主體內容2</td> <td>表主體內容3</td> <td>表主體內容4</td> </tr> </table></body>
再來看看加上這三個標籤後：
<body> <table width="700" height="150" border="1"> <caption>表格標籤的相容性問題</caption> <thead> <tr> <td width="98">頁首1</td> <td width="87">頁首2</td> <td width="137">頁首3</td> <td width="80">頁首4</td> </tr> </thead> <tfoot> <tr> <td>頁尾1</td> <td>頁尾2</td> <td>頁尾3</td> <td>頁尾4</td> </tr> </tfoot> <tbody> <tr> <td>表主體內容1</td> <td>表主體內容2</td> <td>表主體內容3</td> <td>表主體內容4</td> </tr> </tbody> </table></body>
以上都是在搜狗瀏覽器下執行效果，可以發現，雖然加上< thead> < tfoot > < tbody >這三個表格結構標籤後，頁尾的 “頁尾 1234” 確實被放在最後一行呈現，但表格的佈局樣式被完全改變了，然後嘗試在< tfoot > < tbody > 乃至< thead >中加上style="height:150"後重新在搜狗瀏覽器中執行發現仍無法恢復原表格樣式（效果未給出），當然這是由於瀏覽器相容性導致的，在ie瀏覽器中執行則顯示正常。
