表與 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 *。這些樣式作為視覺指南提供，並不是手頭主題的重要方面。