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><caption><th>哪些資訊可能適合搭配表格的版面配置？
<dl>。<ul>。