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>
元素中的第一個巢狀元素。納入這個設定檔可讓所有使用者瞭解
,不必閱讀周圍文字。或者,您可以使用 aria-label
或 aria-labelledby
對 <table>
提供無障礙名稱做為說明文字。<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-spacing
資源。如果設定 border-collapse: collapse
,Border-spacing
不會有任何作用。如果border-collapse: separate;
設定後,您可以使用 empty-cells: hide;
完全隱藏空白儲存格。如要進一步瞭解設定表格樣式,請參閱
表格相關 CSS 樣式的互動式投影片。
在本例中,我們在表格和每個採用 CSS 的儲存格中新增了邊框,讓部分功能更加清楚:
這個範例中有說明文字、表格標題和表格內文。標題有 1 列,內含三個標頭 <th>
儲存格,
進而建立三個資料欄主體含有三列資料:第一個儲存格是該列的標題儲存格,因此我們使用 <th>
而非 <td>
。
<th>
儲存格具有語意含義,包括資料欄標題的隱含 ARIA 角色
或 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 試算表和數字類似,您可以將多個儲存格合併成一個儲存格。這全都是透過 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 欄,或是在多列醒目顯示第 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) 中的功能,可能需要一份說明清單。
雖然排序表格欄時只能反映出 JavaScript,但是透過標記標頭讓使用者知道該資料欄可以排序 HTML 中。
讓使用者知道表格欄可以依遞增、遞減或未排序的圖示排序。目前排序的資料欄應
請加入 aria-sort 屬性和排序方向的列舉值。
<caption>
可透過 aria-live 和
這個跨距可動態更新,且可透過螢幕閱讀器使用者查看。按一下標頭內容即可排序資料欄,因此標頭內容應為 <button>
。
如果你選擇不顯示表格資料,請勿使用 <table>
。如果使用表格進行簡報,請設定 role="none"
。
許多開發人員都會使用表格來規劃表單,但這並非必要。但這並不在意 HTML 表單,因此我們稍後會加以說明。
隨堂測驗
測試您對資料表的瞭解。
哪一個元素可用來標記屬於標題的儲存格?
<header>
<th>
<caption>
哪些資訊可能適合搭配表格的版面配置?