資料表

HTML 表格可用於顯示具有列和欄的表格資料。您應根據要呈現的內容,以及使用者對該內容的需求,決定是否要使用 <table>。如果您要呈現、比較、排序、計算或交叉比對資料,<table> 可能是正確的選擇。如果您只想將非表格內容整齊排列,例如大量縮圖,則不建議使用表格:請改為建立圖片清單,並使用CSS 設定格線樣式

在本節中,我們將討論構成表格的所有元素,以及您在呈現表格資料時應考慮的部分無障礙和可用性功能。雖然「學習 HTML」課程並非以 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-labelaria-labelledby,以便提供可供存取的名稱做為標題。<caption> 元素沒有元素專屬屬性。

標題會顯示在表格外。您可以使用 CSS caption-side 屬性設定標題的位置,這比使用已淘汰的 align 屬性更為理想。這可將字幕設為頂端和底部。系統尚未完全支援左側和右側位置,使用 inline-startinline-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-collapseborder-spacing 屬性設定。如果已設定 border-collapse: collapseBorder-spacing 就不會有任何影響。如果已設定 border-collapse: separate;,則可以使用 empty-cells: hide; 完全隱藏空白儲存格。如要進一步瞭解如何設定資料表樣式,請參閱這份與 CSS 相關的資料表樣式互動式投影片。

在範例中,我們已使用 CSS 在表格和各個單元格上新增邊框,以便更清楚顯示某些功能:

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

<th> 儲存格具有語意意義,隱含的 ARIA 角色為 columnheaderrowheader。它會將儲存格定義為表格資料欄或資料列的標頭,具體取決於列舉 scope 屬性的值。如果未明確設定 scope,瀏覽器會預設為 colrow。由於我們使用了語意標記,因此 1956 儲存格有兩個標頭:Year 和 Lou Minious。這項關聯告訴我們,「1956」是「Lou Minious」的「年份」畢業。在這個範例中,我們可以看到整個表格,因此關聯關係一目瞭然。即使標題列或標題欄已捲出畫面,使用 <th> 仍可提供關聯。我們可以明確設定 <th scope="col">Year</th><th scope="row">Lou Minious</th>,但使用像這樣簡單的資料表時,列舉的預設值就會生效。scope 的其他值包括 rowgroupcolgroup,可用於複雜的表格。

合併儲存格

與 MS Excel、Google 試算表和 Numbers 類似,你可以將多個儲存格合併為單一儲存格。這項操作是透過 HTML 完成的!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> 樣式就會為資料欄設定樣式。舉例來說,當 <colspan> 用於合併資料表中部分資料列的儲存格,而非全部資料列時,您無法確定選取器 (例如 tr > *:nth-child(8)) 會選取每個資料列的第 8 個子項,或是會選取多個資料列的第 8 個資料列,但會選取第 9 和 10 欄的部分儲存格,這取決於合併的資料列或欄儲存格。

很遺憾,系統只支援部分屬性,樣式不會繼承至儲存格,而且在指定儲存格中使用 <col> 元素的唯一方法,就是使用包含 :has() 關聯式選取器 的複雜選取器。

用於設計 HTML 資料表的元素,以分層方式算繪。

如果 <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>。如要使用 Keynote 或 PowerPoint 等簡報軟體提供的功能,您可能需要說明清單

如果您並未呈現表格資料,請勿使用 <table>。如果您確實使用表格進行簡報,請設定 role="none"

許多開發人員會使用表格來安排表單,但其實不必這麼做。不過,您必須瞭解 HTML 表單,因此我們將在下文介紹這項技術。

進行隨堂測驗

測驗您對資料表的瞭解程度。

哪個元素可用來標示標題儲存格?

<caption>
<th>
<header>

哪些資訊可能適合以表格版面配置呈現?

食譜中的食材。
部分科學術語及其說明。
這個試算表包含學生和他們在 3 個學期內的成績詳細資訊。