表与 thead tbody tfoot 和标题

HTML 还提供了包含 <thead>，<tbody>，<tfoot> 和 <caption> 元素的表格。这些附加元素可用于为表添加语义值以及为单独的 CSS 样式提供位置。

当打印出不适合一个（纸质）页面的表格时，大多数浏览器会在每个页面上重复 <thead> 的内容。

必须遵守一个特定的顺序，我们应该意识到并非每个元素都按照人们的预期落实到位。以下示例演示了如何放置我们的 4 个元素。

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

以下示例的结果将演示两次 - 第一个表缺少任何样式，第二个表应用了一些 CSS 属性：background-color，color 和 border *。这些样式作为视觉指南提供，并不是手头主题的重要方面。