先看這個例子
星期二有「HTML 結構」和「版面配置」,星期五則是「JavaScript 入門」。第一個 tbody 剛好有兩行,日期表頭跨這兩行,並標示整組。星期五另在一個 tbody,不沿用星期二。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 第一組 | 數第一個 tbody 的行數 | 兩行:HTML 結構、版面配置 |
| 共用日期表頭 | 查看 rowspan 和 scope | rowspan=2、scope=rowgroup |
| 第二組 | 查看星期五的 tbody | 一行,有自己的行標題 |
瀏覽器怎樣處理
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。