表与 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-colorcolorborder *。这些样式作为视觉指南提供,并不是手头主题的重要方面。

StackOverflow 文档

StackOverflow 文档

元件 样式适用
<caption> 在黑背景的黄色文本。
<thead> 在紫色背景的大胆的文本。
<tbody> 在蓝色背景的文本。
<tfoot> 在绿色背景的文本。
<th> 橙色边框。
<td> 红色边框。