( Day 19.3 ) HTML 表格元素 <thead>、<tbody>、<tfoot>

2023 iThome 鐵人賽

DAY 19

Modern Web

跟著 OXXO 一起學 HTML系列第 50 篇

15th鐵人賽 html html教學

oxxo

2023-09-19 08:45:54

204 瀏覽

分享至

<thead>、<tbody> 和 <tfoot> 是 HTML 裡非必須的表格元素 ( 通常不會特別去使用 )，使用後能讓表格看起來更有架構性，這篇教學會介紹 <thead>、<tbody> 和 <tfoot> 的用法。

原文參考：表格元素 thead、tbody、tfoot

認識 `<thead>`、`<tbody>` 和 `<tfoot>`

<thead>、<tbody> 和 <tfoot> 是 HTML 裡非必須的表格元素，通常不會特別去使用，使用後能讓表格看起來更有架構性，<thead> 是表格的表頭，<tbody> 是表格的內容，<tfoot>則是表格的結尾。

<thead>、<tbody> 和 <tfoot> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」。

<thead> 顯示類型為「table-header-group」，只能作為 <table> 的子元素。

<tbody> 顯示類型為「table-row-group」，只能作為 <table> 的子元素。

<tfoot> 顯示類型為「table-footer-group」，只能作為 <table> 的子元素。

下方的 HTML 會在表格加入 <thead>、<tbody> 和 <tfoot> ( 額外加入邊界值樣式 )。

<style>
  td, th{
    padding:20px;
  }
</style>

<table border=1>
  <thead>
    <tr>
      <th></th>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>第一項</th>
      <td>10</td>
      <td>20</td>
    </tr>
    <tr>
      <th>第二項</th>
      <td>100</td>
      <td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>加總</th>
      <td>110</td>
      <td>220</td>
    </tr>
  </tfoot>
</table>

HTML 教學 - 表格、、

`<thead>`、`<tbody>` 和 `<tfoot>` 支援屬性

<thead>、<tbody> 和 <tfoot> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <thead>、<tbody> 和 <tfoot> 加入 style 屬性，改變其背景顏色。

<style>
  td, th{
    padding:20px;
  }
</style>

<table border=1>
  <thead style="background:#ccc">
    <tr>
      <th></th>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>第一項</th>
      <td>10</td>
      <td>20</td>
    </tr>
    <tr>
      <th>第二項</th>
      <td>100</td>
      <td>200</td>
    </tr>
  </tbody>
  <tfoot style="background:#f99;">
    <tr>
      <th>加總</th>
      <td>110</td>
      <td>220</td>
    </tr>
  </tfoot>
</table>

HTML 教學 - 表格、、

`<thead>`、`<tbody>` 和 `<tfoot>` 預設樣式

下方是 <thead>、<tbody> 和 <tfoot> 的預設樣式：

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}