关于尽量不使用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浏览器中运行则显示正常。