資料表

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-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 表單，因此我們稍後會加以說明。

隨堂測驗

測試您對資料表的瞭解。