深入解析HTML的table表格标签与相关的换行问题

2020-04-17 08:28:16易采站长站整理

常见而又生疏的几个table标签
thead、tfoot以及tbody
这三个标签是所谓xhtml的产物,主要是使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。个人认为其主要用途适用于超长表格的显示优化。
thead标签表示HTML表头
表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头。
thead标签表示HTML页脚
表格的页脚tfoot,可以使用单独的样式定义页脚(脚注或表注),并且在打印时可以在分页的下部打印页脚。
tbody标签表示HTML表体
浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示。
注释:如果您使用 thead、tfoot以及tbody元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前就可呈现表头和页脚了。您必须在table元素内部使用这些标签,且thead内部必须拥有tr标签。所以书写更为标准的table方式即如下代码:

XML/HTML Code复制内容到剪贴板

<table border="0" cellspacing="0" cellpadding="0" width="100%">  
  <thead>  
    <tr>  
      <th>Month</th>  
      <th>Date</th>  
    </tr>  
  </thead>  
  <tfoot>  
    <tr>  
      <th>Month Lists</th>  
      <th>Date Lists</th>  
    </tr>  
  </tfoot>  
  <tbody>  
    <tr>  
      <td>AUG</td>  
      <td>18</td>  
    </tr>  
  </tbody>  
</table>  

个人认为这个东西挺鸡肋,取之无用,弃之可惜。小项目可以增加些语义化,但因为曾经遇到过有多个不同表头在同一表格显示的窘境,限制了日后的开发,所以正式项目从可扩展的角度来说情慎用这些标签。