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>
) 元素。
資料表的子項依序為:
<caption>
元素<colgroup>
元素<thead>
元素<tbody>
元素<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="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()
關聯式選取器 的複雜選取器。
如果 <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>
哪些資訊可能適合以表格版面配置呈現?