資料表

HTML 表格會以列和欄顯示表格資料。您應根據顯示的內容，以及使用者對該內容的需求，選擇使用 <table>。如果資料需要呈現、比較、排序、計算或交叉參照，<table> 可能就是合適的選擇。如要整理非表格內容 (例如大量縮圖)，就不適合使用表格。請改為建立圖片清單，並使用 CSS 設定格線樣式。

在本節中，我們將討論構成表格的所有元素，以及呈現表格資料時應考量的一些無障礙和可用性功能。雖然「學習 HTML」課程的重點不是 CSS，但我們會介紹一些表格專用的 CSS 屬性。如要進一步瞭解 CSS，請參加「學習 CSS」課程。

表格元素 (依序排列)

<table> 標記會包裝表格內容，包括所有表格元素。<table> 的隱含 ARIA 角色為 table；輔助技術會將這個元素視為表格結構，內含以資料列和資料欄排列的資料。如果表格會維持選取狀態、具有二維導覽功能，或允許使用者重新排列儲存格順序，請設定 role="grid"。 如果 grid 的資料列可以展開及收合，請改用 role="treegrid"。

在 <table> 內，您會看到表格標題 (<thead>)、表格主體 (<tbody>)，以及表格頁尾 (選用) (<tfoot>)。 這些元素都由表格列 (<tr>) 組成。列包含表格標題 (<th>) 和表格資料 (<td>) 儲存格，而這些儲存格又包含所有資料。 在 DOM 中，您可能會在上述項目之前找到兩個額外功能：表格說明 (<caption>) 和資料欄群組 (<colgroup>)。視 <colgroup> 是否有 span 屬性而定，其中可能包含巢狀表格資料欄 (<col>) 元素。

資料表的子項依序為：

1. <caption> 元素
2. <colgroup> 元素
3. <thead> 元素
4. <tbody> 元素
5. <tfoot> 元素

我們會介紹 <table> 元素的子項 (全為選用，但建議使用)，然後查看資料列、資料表標題儲存格和資料表資料儲存格。最後會介紹 <colgroup>。

表格說明

建議的資料表命名方式是使用語意元素 <caption>。<caption> 提供描述性且以程式輔助關聯的表格標題。 預設情況下，所有使用者都能看到並使用這項功能。

<caption> 元素應是 <table> 元素中巢狀結構的第一個元素。加入表格標題後，所有使用者都能立即瞭解表格用途，不必閱讀周圍的文字。或者，您也可以在 <table> 上使用 aria-label 或 aria-labelledby，以說明文字的形式提供無障礙名稱。<caption> 元素沒有元素專屬屬性。

說明文字會顯示在表格外。如要設定說明文字的位置，請使用 CSS caption-side 屬性，這比使用已淘汰的 align 屬性更符合最佳做法。這可將說明文字設為頂端和底部。目前尚未完全支援使用 inline-start 和 inline-end 進行左右側定位。「頂端」是預設的瀏覽器呈現方式。

資料表最好有清楚的標題和說明，且內容簡單明瞭，幾乎不需解釋。請注意，每位使用者的認知能力不盡相同。如果表格「要點」或需要解讀，請簡要摘要說明表格的主要重點或功能。摘要的顯示位置取決於長度和複雜度。 如果簡短，請做為說明文字的內文。如果較長，請在說明文字中摘要說明，並在表格前的段落中提供摘要，然後使用 aria-describedby 屬性將兩者建立關聯。您也可以將表格放在 <figure> 中，並將摘要放在 <figcaption> 中。

資料分區

表格內容最多可由三個部分組成：零或多個表格標題 (<thead>)、表格內文 (<tbody>) 和表格頁尾 (<tfoot>)。這三個部分都是選用項目，且每個部分都支援零或多個項目。

這些元素不會影響表格的無障礙程度，但有助於提升可用性。它們提供樣式掛鉤。舉例來說，標頭內容可以設為固定，而 <tbody> 內容則可設為捲動。如果資料列未巢狀內嵌於這三種容器元素之一，系統會隱含地將資料列包裝在 <tbody> 中。這三者都共用相同的隱含角色 rowgroup。 這三個元素都沒有任何元素專屬屬性。

目前為止的進展：

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

基於無障礙功能考量，<tfoot> 元素原本指定要緊接在 <thead> 之後和 <tbody> 之前， 因此您可能會在舊版程式碼庫中遇到這種不直覺的來源順序。

表格內容

表格可分為表格標題、主體和頁尾，但如果表格不含表格列、儲存格和內容，這些部分就沒有任何作用。每個資料表列 <tr> 包含一或多個儲存格。如果儲存格是標題儲存格，請使用 <th>。 否則請使用 <td>。

使用者代理程式樣式表通常會將<th>表格標題儲存格中的內容置中並加粗。這些預設樣式和所有樣式，最好都使用 CSS 控制，而不是使用個別儲存格、列，甚至是 <table> 上已淘汰的屬性。

這些屬性可新增儲存格之間和儲存格內的邊框間距、邊框，以及文字對齊方式。儲存格邊距和儲存格間距分別定義儲存格內容與邊框之間的空間，以及相鄰儲存格邊框之間的空間，應使用 CSS border-collapse 和 border-spacing 屬性設定。如果已設定 border-collapse: collapse，Border-spacing 將不會生效。如果已設定 border-collapse: separate;，則可使用 empty-cells: hide; 完全隱藏空白儲存格。如要進一步瞭解如何設定表格樣式，請參閱這個互動式投影片組，瞭解與表格相關的 CSS 樣式。

在範例中，我們已使用 CSS 在表格和每個儲存格中新增邊框，讓某些功能更明顯：

在這個範例中，我們有說明文字、表格標題和表格主體。標題有一列，其中包含三個標題 <th> 儲存格，因此會建立三個資料欄。主體包含三列資料：第一個儲存格是資料列的標頭儲存格，因此我們使用 <th> 而非 <td>。

<th> 儲存格具有語意意義，並隱含 ARIA 角色 columnheader 或 rowheader。根據列舉的 scope 屬性值，將儲存格定義為資料欄或資料列的標題。如果未明確設定 scope，瀏覽器會預設為 col 或 row。 由於我們使用了語意標記，1956 儲存格有兩個標題：Year 和 Lou Minious。這項關聯會告訴我們，「1956」是「Lou Minious」的「畢業年份」。在本範例中，由於我們可以看到整個表格，因此關聯性一目瞭然。 即使標題欄或列已捲動到畫面外，使用 <th> 仍可提供關聯。我們可以明確設定 <th scope="col">Year</th> 和 <th scope="row">Lou Minious</th>，但對於這類表格，列舉的預設值會生效。scope 的其他值包括 rowgroup 和 colgroup，適用於複雜的表格。

合併儲存格

與 MS Excel、Google 試算表和 Numbers 類似，您可以在單一儲存格中合併多個儲存格。您可以使用 HTML colspan 和 rowspan 屬性來執行這項操作：

• colspan 會合併單一資料列中兩個以上的相鄰儲存格。
• rowspan 會在新增至合併列的第一個儲存格時，合併列中的儲存格。

在本例中，表格標題包含兩列。第一個標題列包含三個儲存格，橫跨四個資料欄：中間的儲存格有 colspan="2"。這會合併兩個相鄰的儲存格。第一個和最後一個儲存格包含 rowspan="2"。這會將儲存格與正下方相鄰列的儲存格合併。

表格標題的第二列包含兩個儲存格，分別是第二列的第二和第三欄。 由於第一列的第一欄和最後一欄中的儲存格跨越兩列，因此第一欄和最後一欄不會宣告任何儲存格。

如果儲存格是由多個標題儲存格定義，且關聯無法單獨透過 scope 屬性設定，請加入 headers 屬性，並以空格分隔列出相關聯的標題。由於這個範例是較複雜的表格，因此我們使用 scope 屬性明確定義標題的範圍。為求更清楚，我們在每個儲存格中新增了 headers 屬性。

在本例中，headers 屬性可能不是必要條件，但隨著表格複雜度增加，請務必記住這些屬性。如果表格結構複雜，例如標題或儲存格已合併，或包含超過兩層的欄或列標題，則必須明確指出相關聯的標題儲存格。在這種複雜的表格中，請明確將每個資料儲存格與每個對應的標題儲存格建立關聯，方法是將所有相關聯標題的以空格分隔的 id 值清單，做為 headers 屬性的值。

headers 屬性通常位於 <td> 元素，但也可位於 <th>。

不過，複雜的表格結構對所有使用者來說都很難理解，不只是螢幕閱讀器使用者。就認知和螢幕閱讀器支援而言，簡單的表格 (幾乎沒有或完全沒有跨距儲存格)，即使未新增範圍和標題，也更容易理解。管理起來也更輕鬆！

設定表格樣式

我們簡要提及了兩個相對不顯眼的元素：資料欄群組 (<colgroup>) 元素，以及其唯一的後代 (空白的 <col> 資料欄元素)。<colgroup> 元素用於定義表格中的欄群組或 <col> 元素。

如果使用，欄分組應巢狀內嵌在 <table> 中，緊接在 <caption> 之後，且位於任何表格資料之前。如果跨越多個資料欄，請使用 span 屬性。

表格的內容大綱順序通常如下，其中 <table> 和 <caption> 是應包含的兩個元素：

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> 和 <col> 沒有語意意義， 會影響表格的無障礙功能。不過，這些屬性有助於使用 CSS 設定欄寬等樣式。

<td> 和 <th> 相關樣式會覆寫 <col> 樣式。在 CodePen 中，我們設定 colspan 合併表格的部分資料列，但不是全部。如果 nth-child CSS 選取器套用至 <tr>，視合併的列或欄而定，這可能會影響樣式。

遺憾的是，系統僅支援少數屬性。樣式不會沿用至儲存格，如要使用 <col> 指定儲存格，唯一方法是使用複雜的選取器，例如:has() 關係選取器。

如果 <table> 和 <colgroup> 都有背景顏色，則 <colgroup> 的 background-color 會顯示在最上層。繪製順序如下： 表格、欄群組、欄、列群組、列，最後是儲存格，且儲存格位於最上方，如表格圖層結構定義所示。 <td> 和 <th> 元素不是 <colgroup> 或 <col> 元素的子項，因此不會繼承樣式。

如要為表格加上間隔線，CSS 結構選取器就派上用場了。舉例來說，tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} 會在表格主體的每個奇數列中加入半透明黑色，同時允許 <colgroup> 上設定的背景效果透視。

表格預設不會自動調整大小。而是預設會根據內容調整大小。您需要採取額外措施，才能讓表格版面配置樣式在各種裝置上有效運作。如果要變更表格元素的 CSS 顯示屬性，請加入 ARIA role 屬性。雖然這聽起來很冗餘，但 CSS display 屬性可能會影響某些瀏覽器的無障礙樹狀結構。

呈現資料

表格元素具有語意意義，輔助技術會使用這些意義，協助使用者瀏覽資料列和資料欄，不會迷路。<table> 元素不應用於簡報。如要在清單上方加上標題，請使用標題和清單。如要以多欄配置內容，請使用多欄配置。如要以格線配置內容，請使用 CSS 格線。

只能使用資料表。

舉例來說，如果資料需要以試算表形式呈現，才能在會議上展示，請使用 <table>。如要使用簡報軟體 (例如 Google 簡報或 PowerPoint) 提供的功能，您可能需要說明清單。

簡而言之，如果不是呈現表格資料，請勿使用 <table>。如果使用表格進行簡報，請設定 role="none"。

許多開發人員會使用表格來配置表單，但這並非必要。您需要瞭解 HTML 表單。

隨堂測驗

測試您對表格的瞭解。