表格
表格用來呈現列與欄對齊的資料，例如課程時間、價格比較、實驗數據。不要用表格排整個網頁版面——那是早期的做法，螢幕閱讀器會把版面格子當成資料來念，CSS 才是排版工具。
基本結構
<table>
<caption>2026 年課程時段</caption>
<thead>
<tr>
<th scope="col">課程</th>
<th scope="col">時數</th>
<th scope="col">程度</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML5 入門</th>
<td>8</td>
<td>初學</td>
</tr>
<tr>
<th scope="row">表單實作</th>
<td>4</td>
<td>初學</td>
</tr>
</tbody>
</table>
| 元素 | 用途 |
|---|---|
table |
整張表 |
caption |
表格標題，螢幕閱讀器會先讀到 |
thead／tbody／tfoot |
表頭、表身、表尾（合計列可放 tfoot） |
tr |
一列 |
th |
儲存格標題 |
td |
資料儲存格 |
讓輔助科技對得上格子
視覺上看得出「時數」是欄名；螢幕閱讀器要靠 th 與 scope：
- 欄標題：
<th scope="col"> - 列標題：
<th scope="row">
沒有 th、全部用 td 的表，使用者聽到的是一串沒有上下文的數字。
儲存格合併用 colspan、rowspan。能不合併就不要合併，合併後要更小心標題範圍。
樣式與內容分開
HTML 裡不要靠 border、bgcolor、align 這些舊屬性排版。框線、斑馬紋、對齊交給 CSS。本站範例省略樣式，是為了讓你先看結構。
推薦影音
語意化表格
簡述：Dave Gray 說明何時不該用表格、基本列欄、caption、thead／tbody／tfoot、scope，以及 colspan／rowspan。與本頁範例直接對應。