實施範例6

6.把數據表中的資料單元格與標題聯繫

為了把數據表格中的資料單元格與相應的標題聯繫起來,這項技巧會在各個資料單元格(td元素)中加上headers屬性。而在用作標題的單元格上,則加入id屬性,讓其他資料格作聯繫。

在數據資料格的headers屬性中,會包含聯繫標題格的id屬性清單。如果有一個以上的標題時,可使用空格來把id的值分隔。

由於在只使用dh元素,或dh元素加scope屬性的情況下,讀屏軟件未必能夠確定資料格與標題的複雜關係,因此當資料格需要與多於一欄或列的標題作聯繫時,便應運用此技巧。當數據表的格式有改變時,這也可令複雜的關聯可容易地被察覺。

這個技巧不建議使用在作為頁面佈局的表格上,因為在這種表格裏,資料格之間的關係通常是沒有意義的。

範例︰

這是一個有多列標題的數據表格。

範例代碼︰

<table>
<tr>
<th rowspan="2" id="h">Homeworks</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>