跳至內容
Astera Technology

幾行共用一個表頭,要保留分組關係

星期二有兩節課,共用同一個日期表頭;跨行的外觀和分組語意要一起保留。

星期二只跨自己的兩行,並標示該組。

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

先看這個例子

星期二有「HTML 結構」和「版面配置」,星期五則是「JavaScript 入門」。第一個 tbody 剛好有兩行,日期表頭跨這兩行,並標示整組。星期五另在一個 tbody,不沿用星期二。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
第一組數第一個 tbody 的行數兩行:HTML 結構、版面配置
共用日期表頭查看 rowspan 和 scoperowspan=2、scope=rowgroup
第二組查看星期五的 tbody一行,有自己的行標題
下載可編輯 CSV ↓

瀏覽器怎樣處理

rowspan 決定在格線上跨幾行;scope="rowgroup" 表達整組的關係。兩者要配合相符的 tbody,不能把跨行格拉入另一組。量度格子位置可以核對外觀;元素和 scope 則用來核對關聯意思。

跨行外觀相同,也要寫對 scope

反例保留 rowspan="2",卻把 scope 寫成 row。外觀仍跨兩行,但缺了正例明確的整組範圍。

反例原始碼,請另開例子核對
<table><tbody><tr><th rowspan="2" scope="row">星期二</th><td>HTML 結構</td></tr><tr><td>版面配置</td></tr></tbody></table>

兩份原始碼外觀都跨兩行,只有正例明確用 scope="rowgroup"。此核對不推定所有輔助工具會怎樣補救反例。

試着修正

在第一個 tbody 加第三節星期二場次,哪個跨行數值要改?

查看參考答案

星期二的 rowspan 改成 3,scope="rowgroup" 保留。三行都在同一 tbody,星期五仍另成一組。

  • 表頭跨行數須跟該組行數相符。
  • 除了截圖,也要查 tbody 邊界和 scope。

原始例子檔案

相關資源