HTML 表格用於顯示含有列與欄的表格資料。請根據您要呈現的內容，以及使用者對該內容的需求，決定是否要使用 <table>。如果呈現、比較、排序、計算或交叉參照資料，則 <table> 可能是合適的選擇。如果只想為非表格內容妥善排列 (例如一大群縮圖圖片)，則不適合使用表格。請改為建立圖片清單，並使用 CSS 格線設定樣式。
本節將探討組成資料表的所有元素，以及您在呈現表格資料時應考量的無障礙功能和可用性功能。雖然瞭解 HTML 並非主要用於 CSS，但我們有學習 CSS 的完整課程，但我們會介紹一些資料表專用的 CSS 屬性。
表格元素 (依順序排列)
<table> 標記會包裝表格內容，包括所有表格元素。<table> 的隱含 ARIA 角色為 table；輔助技術知道這個元素是包含列和欄資料的資料表結構。如果表格維持選取狀態、提供二維導覽功能，或允許使用者調整儲存格順序，請設定 role="grid"。如果 grid 的資料列可以展開及收合，請改用 role="treegrid"。
在 <table> 中，您會看到表格標題 (<thead>)、表格內文 (<tbody>)，以及表格頁尾 (選用)。每列都由表格列 (<tr>) 組成。資料列則含有表格標題 (<th>) 和資料表資料 (<td>)，而表格儲存格中又包含所有資料。<tfoot>在 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 內容，使部分功能更一目瞭然：
在本例中，有說明文字、表格標題和表格內文。這個標頭中有 1 個資料列包含三個標頭 <th> 儲存格，因而建立了三個資料欄。主體包含三列資料：第一個儲存格是該列的標題儲存格，因此我們會使用 <th>，而非 <td>。
<th> 儲存格具有語意含義，帶有 columnheader 或 rowheader 的隱性 ARIA 角色。視列舉的 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 欄，但系統會根據資料列或資料欄的 9 個和第 10 個資料欄，將 9 個和第 10 個儲存格合併成 9 個儲存格。
遺憾的是，系統僅支援部分屬性，儲存格不會沿用樣式。在目標儲存格中使用 <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 和動態更新的 Span，以供螢幕閱讀器使用者看見更新的排序順序。由於資料欄可透過點選標頭內容排序，因此標頭內容應為 <button>。
如果您不是呈現表格資料，請勿使用 <table>。如果您使用表格製作簡報，請設定 role="none"。
許多開發人員都會使用表格安排表單的版面配置，但不需要這麼做。不過，您必須瞭解 HTML 表單，以下我們將介紹。
隨堂測驗
測驗您對資料表的瞭解。
哪一個元素可用來標記標題的儲存格？
<header><caption><th>哪種資訊最適合用於表格版面配置？
<dl>。<ul>。