Building Tables - HTML5 with CSS3 - page 211

colspan : a positive integer indicating the number of adjacent columns to be
spanned by the table heading.



rowspan : a positive integer indicating the number of adjacent rows to be spanned
by the table heading.



headers : a space-separated list of unique IDs referencing th elements with those
IDs that act as headers for the table heading.



Setting scope
Looking back at Figure 7-4, you can see that the th elements are presented in a bold font and centered.
For sighted users, this makes comprehending a table's structure fairly easy. Unfortunately for other users,
including those with disabilities, our table structure lacks important cues as to the nature of its layout.
Luckily, there exists a helpful attribute unique to the th element that defines what it labels.
The scope attribute provides information about the context of a table header. From the example in Listing
7-8, you know that the table headers "Product" and "Quantity" act as column headers. As such, you would
use the value col with the scope attribute, as you see in Listing 7-10.
Listing 7-10. A table demonstrating usage of the scope attribute's col value

<table>
<tr>
<th scope="col" >Product</th>
<th scope="col" >Quantity</th>
</tr>
<tr>
<th>Utility Belts</th>
<td>9</td>
</tr>
<tr>
<th>Grappling Hooks</th>
<td>27</td>
</tr>
<tr>
<th>Smoke Pellets</th>
<td>623</td>
</tr>
</table>

The browser now understands that the "Product" and "Quantity" table headings act as column headers.
Assistive software such as screen readers can take advantage of this attribute and better describe the
information presented in the table.

Similarly, you can add a scope attribute with a value of row to the remaining headers in the table (as
shown in Listing 7-11).