資料表格

表格教學

資料表格用於以網格形式組織具有邏輯關係的資料。無障礙性的表格需要HTML標記來指示標題儲存格 (header cell) 與資料儲存格 (data cell) 並定義它們的關係。輔助科技使用此資訊為使用者提供上下文內容。

標題儲存格必須標記 <th>，資料儲存格必須標記 <td> 以便可以存取表格。對於更複雜的表，可能需要使用 scope、id 與 headers 屬性進行明確關聯。

本教學說明如何適當的把結構標記 (structural markup) 應用於表格。含以下面項：

有一個行或列標題的表格：對於易於區分內容的表格，請使用元素標記標題位置，使用 <th> 元素標記資料格 <td>。
有兩個標題的表格包含有一個簡單的行標題與一個簡單的列標題：對於標題方向不明確的表格，可以透過將範圍 (scope) 屬性設為行 ( col ) 或列 ( row ) 來定義每個標題的方向。
有不規則標題的表格具有跨越多個列與 / 或多行的標題儲存格：對於這些表格，定義列組與行組，並使用範圍屬性的行組 (colgroup) 與列組 (rowgroup) 來設定標題儲存格的範圍。
具有多層標題的表格具有每個資料儲存格關聯多個標題儲存格：對於複雜到標題儲存格無法以嚴格水平或垂直方式關聯的表格，請使用 id 與 headers 屬性來明確關聯標題儲存格與資料儲存格。
標題與摘要：標題標識了表格的整體主題，在大多數情況下都很有用。摘要於複雜的表格中提供方向或導覽提示。

HTML 以外的某些文件格式 (例如 PDF ) 提供與標記表結構類似的機制。文書處理應用程式還可以提供標記 (markup) 表格的機制。雖然某些程式可能提供幫助轉換表格標記的功能，但從一種格式轉換為另一種格式時，表格標記經常會遺失。

許多網站設計 (web authoring) 工具與內容管理系統 (CMS) 提供在表格建立期間定義標題儲存格的功能，而無需手動編輯程式碼。

註:本教學提供了建立用於在網格中顯示資料的表格指南。本教學不適用於版面配置的表格。作為一般規則，表格不應該用於版面配置的目的。取而代之的是使用層疊樣式表 (CSS) 進行視覺呈現才是最佳實踐。

為什麼這很重要？

缺乏結構標記，無法正確連結並區分標題與資料儲存格的表格，會對造成無障礙性阻礙。僅依靠視覺提示不足以建立無障礙性的表格。透過結構標記，標題與資料儲存格可以由軟體以程式設計方式確定，這意味著：

使用螢幕報讀軟體的人可以在瀏覽表格時大聲朗讀行標題與列標題。螢幕報讀軟體一次讀出一個儲存格並引用關聯的標題儲存格，因此閱讀器不會遺失上下文。
有些人使用替代方法來呈現資料，例如使用自訂樣式表來顯示並強調標題儲存格。此類技術使他們能夠更改文字大小與顏色，並將資訊顯示為列表而不是網格。需要適當地建構表格的程式碼以允許使用替代方法來呈現資料。