跳至內容
Astera Technology

表格同時有行標題和欄標題,怎樣寫?

表格數值要看得出屬哪個檔案、哪個階段,以及用甚麼單位;行欄標題各有作用。

簡單的雙向資料表,行欄標題各有明確 scope。

下載完整個案資料及參考答案 ↓

先看這個例子

這份假設量度表全部用 KB。「頁面」和「樣式表」識別兩行,「原始檔」和「輸出檔」識別兩欄。讀到數值 6 時,要同時看所屬行和欄,不能把它當成獨立數字。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
頁面/輸出檔沿頁面一行和輸出檔一欄查看6 KB
樣式表/原始檔沿樣式表一行和原始檔一欄查看2 KB
表頭結構查看 th 和 scope三個欄標題、兩個行標題
下載可編輯 CSV ↓

瀏覽器怎樣處理

表頭用 th;本例簡單表格再用 scope="col" 或 scope="row" 指明方向。caption 交代主題和單位。td 即使加粗仍是資料格,caption 也不能取代每個表頭。若有多層表頭,須另按實際結構安排關聯。

td 加粗之後,仍然不是表頭

反例只把「頁面」字款加粗。行標籤改成了 td,沒有表頭語意。

反例原始碼,請另開例子核對
<table><caption>檔案大小,單位 KB</caption><tr><td style="font-weight:bold">頁面</td><td>4</td><td>6</td></tr></table>

反例沒有 th,也沒有行標題。正例的「頁面」是 th,並設 scope="row"。

試着修正

新增「圖片」一行,原始檔為 12、輸出檔為 9。哪格應標為行標題?輸出值連單位是多少?

查看參考答案

「圖片」用 <th scope="row">圖片</th>。輸出資料格是 9 KB,單位沿用本表 caption。

  • 改表格樣式時,保留 scope 表頭及 caption。
  • 在 320px 框內仍能讀完整個最右欄。

原始例子檔案

相關資源