資料表

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> 元素中的第一個巢狀元素。納入這個設定檔可讓所有使用者瞭解 ,不必閱讀周圍文字。或者,您可以使用 aria-labelaria-labelledby<table> 提供無障礙名稱做為說明文字。<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-spacing 資源。如果設定 border-collapse: collapseBorder-spacing 不會有任何作用。如果border-collapse: separate; 設定後,您可以使用 empty-cells: hide; 完全隱藏空白儲存格。如要進一步瞭解設定表格樣式,請參閱 表格相關 CSS 樣式的互動式投影片。

在本例中,我們在表格和每個採用 CSS 的儲存格中新增了邊框,讓部分功能更加清楚:

這個範例中有說明文字、表格標題和表格內文。標題有 1 列,內含三個標頭 <th> 儲存格, 進而建立三個資料欄主體含有三列資料:第一個儲存格是該列的標題儲存格,因此我們使用 <th> 而非 <td>

<th> 儲存格具有語意含義,包括資料欄標題的隱含 ARIA 角色 或 rowheader 標記。會將儲存格定義為表格欄或表格列的標頭。 視列舉 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 試算表和數字類似,您可以將多個儲存格合併成一個儲存格。這全都是透過 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() 關聯選取器等複雜的選取器。

對設計 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) 中的功能,可能需要一份說明清單

雖然排序表格欄時只能反映出 JavaScript,但是透過標記標頭讓使用者知道該資料欄可以排序 HTML 中。 讓使用者知道表格欄可以依遞增、遞減或未排序的圖示排序。目前排序的資料欄應 請加入 aria-sort 屬性和排序方向的列舉值。 <caption> 可透過 aria-live 和 這個跨距可動態更新,且可透過螢幕閱讀器使用者查看。按一下標頭內容即可排序資料欄,因此標頭內容應為 <button>

如果你選擇不顯示表格資料,請勿使用 <table>。如果使用表格進行簡報,請設定 role="none"

許多開發人員都會使用表格來規劃表單,但這並非必要。但這並不在意 HTML 表單,因此我們稍後會加以說明。

隨堂測驗

測試您對資料表的瞭解。

哪一個元素可用來標記屬於標題的儲存格?

<caption>
<th>
<header>

哪些資訊可能適合搭配表格的版面配置?

這份試算表內含超過 3 個學期的學生及成績詳細資料。
食譜食材
一些科學術語及其說明。