在表格中，th scope="row"和th scope="col"中的scope屬性的用法及意義

把表頭和數據聯系起來：scope，id，headers屬性
就我用到現在，很多表格要比上面提供的例子復雜的多。讓例子復雜一點，我會移去“Company”表頭，並且把第一列的數據移到表頭單元格里：

<table summary="The number of employees and the foundation year of some imaginary companies.">
　　<caption>Table 1: Company data</caption>
　　<tr>
　　　　<td></td>
　　　　<th>Employees</th>
　　　　<th>Founded</th>
　　</tr>
　　<tr>
　　　　<th>ACME Inc</th>
　　　　<td>1000</td>
　　　　<td>1947</td>
　　</tr>
　　<tr>
　　　　<th>XYZ Corp</th>
　　　　<td>2000</td>
　　　　<td>1973</td>
　　</tr>
</table>

 

在這個表格里，每一個數據單元格都有兩個表頭。最簡單的方法讓那些非可視的瀏覽器理解這個表格，就是為每個表頭添加一個scope屬性。

<table summary="The number of employees and the foundation year of some imaginary companies.">
　　<caption>Table 1: Company data</caption>
　　<tr>
　　　　<td></td>
　　　　<th scope="col">Employees</th>
　　　　<th scope="col">Founded</th>
　　</tr>
　　<tr>
　　　　<th scope="row">ACME Inc</th>
　　　　<td>1000</td>
　　　　<td>1947</td>
　　　　</tr>
　　<tr>
　　　　<th scope="row">XYZ Corp</th>
　　　　<td>2000</td>
　　　　<td>1973</td>
　　</tr>
</table>

Scope屬性同時定義了行的表頭和列的表頭：
col: 列表頭
row: 行表頭
在第一行的<th>加上值為col的scope屬性，聲明他們是下面數據單元格的表頭。同樣的，給每行的開頭<th>加上值為row的scope屬性聲明他們是右邊數據單元格的表頭。
Scope屬性還有兩個值：
colgroup: 定義列組（column group）的表頭信息
rowgroup: 定義行組（row group）的表頭信息
一個列組是由<colgroup>標簽定義的。行組則是由<thead>、<tfoot>和<tbody>定義的。稍后我將會詳細介紹它們。
如果你既想要保留“Company”表頭，而又想讓公司名字作為行表頭（row headers）顯示，你會怎么做？那樣的話，應該使得包含公司名字的單元格同時提供表頭和數據信息。也就是說，<td>標簽也應該加上scope屬性：

<table summary="The number of employees and the foundation year of some imaginary companies.">
　　<caption>Table 1: Company data</caption>
　　<tr>
　　　　<th scope="col">Company</th>
　　　　<th scope="col">Employees</th>
　　　　<th scope="col">Founded</th>
　　</tr>
　　<tr>
　　　　<td scope="row">ACME Inc</td>
　　　　<td>1000</td>
　　　　<td>1947</td>
　　</tr>
　　<tr>
　　　　<td scope="row">XYZ Corp</td>
　　　　<td>2000</td>
　　　　<td>1973</td>
　　</tr>
</table>

這樣的話可視化瀏覽器不會默認的把company name顯示為表頭。所以需要用CSS來修正一下，就剛才那個例子，我使用了下面的CSS：
td[scope] {
font-weight:bold;}