2025 iThome 鐵人賽

DAY 11

Modern Web

前端迷走中：從零開始的新手之路系列第 11 篇

[Day 11] 做個清清楚楚的表格⸺標題、結構與分組

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-09-25 23:47:44

26 瀏覽

分享至

昨天我們對HTML的表格做了基本的介紹。

包括使用<table>、<tr>跟<td>這三種元素，建立一個簡單的表格；
以及將標題欄/列改成<th>，進一步區分表格的標題與資料；
還有設定colspan與rowspan屬性，讓其中的格子跨欄/列顯示。

運用這些元素跟屬性就能建立常見的表格。但我們還可以做其他設定，讓我們的表格變得更清楚。

像是為表格添加說明、劃分結構，還有對特定幾欄設定共同樣式。

讓我們開始今天的介紹吧～

為表格加上標題或描述

除了標題欄或標題列之外，我們通常還會幫整個表格下個標題或做個簡短描述，以便人們理解表格的意義。

表格的標題或描述對於以無障礙功能瀏覽網頁的使用者尤其重要，可以讓他們了解表格的大意，無需再逐一了解每格的內容。

在HTML中，在<table>裡添加<caption>元素，可以為表格添加標題或描述。但<caption>必須要是<table>中的第一個元素。[1]

透過<caption>添加的標題或描述，預設會在表格的上方置中對齊。但可以再另外透過CSS設定。[2]

以下由MDN提供的例子，便以<caption>添加的標題或描述說明這個表格整理了使用者登入時用的email地址。

<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@example.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@example.com</td>
  </tr>
</table>

劃分表格的結構

除了幫表格添加標題，也可以使用<thead>、<tbody>跟<tfoot>等元素，將表格劃分出明確的語意結構。

劃分表格的結構，可以讓瀏覽器或無障礙功能等技術進一步解讀結構的語意。也可以透過CSS，為這些結構分別設定樣式以便於瀏覽。

比如說，在使用者瀏覽網頁中的長表格時，可以讓<thead>跟<tfoot>代表的表頭跟結尾固定在畫面上不動，只捲動其中由<tbody>表示的主要內容。[3]

`<thead>`

<thead>可以理解為表頭，通常會由表格的標題列組成。

若要劃分表頭，將表格中作為標題列的<tr>與包在其中的<th>等元素，另外以<thead>元素包起來即可。

但要注意，<thead>需要擺在<caption>或<colgroup>跟<col>等元素之後，<tbody>、<tfoot>和<tr>等元素之前。[4]

`<tfoot>`

<tfoot>可以理解為表格的結尾，通常會是各欄的總結或摘要，像是統計數字的總和等。

劃分表格結尾時，會將表格中作為總結或摘要的最後幾列，另外以<tfoot>包起來。

<tfoot>的位置，通常會放在<caption>、<colgroup>、<thead>、<tbody>跟<tr>等元素之後。[5]

`<tbody>`

<tbody>可以理解為表格的主要內容。

即便建立表格時沒有劃分出表格結構，瀏覽器開啟網頁時也會自動為表格新增這個元素。

如果要手動劃分出表格的主要內容，則要將存放這幾列資料的<tr>等元素包在<tbody>裡。但<tbody>需要擺在<caption>、<colgroup>、<col>跟<thead>等元素之後。

表格的主要內容可以拆成多段，分別放在個別的<tbody>裡，但這些<tbody>元素需要是連續相接的。

如果表格中有多個<tbody>，則這些<tbody>裡可能又有各自的標題列，由<tr>與<th>等元素組成。[6]

範例

以下為MDN提供的範例，其中的表格列出了學生的基本資料，並統計這些學生平均修了幾學分。

透過<thead>、<tbody>跟<tfoot>這三個元素，這個表格劃分出表頭、主要內容、表格結尾。

在<thead>代表的表頭中，有一個由<tr>、<th>組成的標題列，說明這些這幾欄的意義分別是學號、姓名、主修、學分數；
在<tbody>代表的主要內容中，有三個由<tr>、<td>組成的資料列，分別列出三位學生對應於標題列的各項基本資料；
在<tfoot>代表的表格結尾中，則有一個<tr>、<th>組成的統計列。
最後一列只需要兩個資料，一個是統計出的平均數，另一個則說明這個數字的意義。因此說明數字意義的那格就以colspan屬性設定為橫跨三個欄位。

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

以欄將表格分組

雖然HTML的表格是在列裡面放入不同格子，不是真的將表格分欄，不過透過<colgroup>跟<col>這兩個元素，可以達成類似的效果。能夠將表格中的欄分成不同群組，以便設定樣式等。

使用<colgroup>時，需要將它放在<caption>之後，<thead>、<tbody>、<tfoot>和<tr>等元素之前[7]；
<col>則需要放在<colgroup>裡面使用。[8]

<colgroup>跟<col>都可以用span屬性設定其所代表的群組包括幾欄。span的預設值為1，可以設定成其他大於0但小於等於1000的非負整數。[9]

<colgroup>可以單獨使用，只透個幾個<colgroup>將表格的欄分成不同群組。也可以搭配<col>使用，在<colgroup>裡面放入幾個<col>。

不過如果要搭配內層的<col>使用，外層的<colgroup>就不能設定span屬性。不然內層<col>做的設定會無效。

至於<col>則是空元素，裡面不能再放其他元素。[7]

雖然透過這兩種元素可以將表格的欄分群以便個別設定樣式，但其實透過<colgroup>跟<col>能做到的樣式設定有限。只能設定background、border、visibility跟width等CSS屬性。[8]

`<colgroup>`跟`<col>`的差異？

<colgroup>跟<col>蠻類似的，都可以透過span屬性將多欄組成一個群組。不確定兩者的定位有什麼區別。

MDN有提到只有透過<colgroup>才能從結構上將表格的欄分組。可能是兩者的差異所在。[8]

實際運用上，則可能<colgroup>搭配<col>使用的話，能做到多層次的樣式設定。像是外層的<colgroup>設定一種共通樣式，內層的<col>再分別設定不同樣式。

來點範例

以下由W3schools提供的範例，在<colgroup>裡放入了兩個<col>，將表格的三欄分成兩組。
第一個<col>以span屬性設定為包含兩欄，並透過style屬性將前兩欄的底色設為紅色。第二個則以style將最後一欄的底色設為黃色。

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>