HTML and CSS Reference
In-Depth Information
Listing 7-11. A table demonstrating usage of the scope attribute's row value
<table>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
</tr>
<tr>
<th scope="row" >Utility Belts</th>
<td>9</td>
</tr>
<tr>
<th scope="row" >Grappling Hooks</th>
<td>27</td>
</tr>
<tr>
<th scope="row" >Smoke Pellets</th>
<td>623</td>
</tr>
</table>
While the scope attribute has no impact on the visual presentation of the table, it adds a healthy dose of
semantics and is a boon to assistive technologies. Remember, not every visitor to your website will be
using a visual web browser to interact with your content.
Table Row Groups
Now that you know how to build a basic table, we'll introduce you to a collection of elements whose job is
to increase the semantic value of your data tables. As an added bonus, using these grouping elements will
result in a more accessible data table. All of the elements in this section are optional, but given the
semantic and accessibility gains from their inclusion, we recommend that you use them whenever it's
practical.
Each of these row group elements— thead , tbody , and tfoot —must appear as direct children of their
parent table element.
thead
The thead element, also known as a table heading row group , contains the row or rows that act as column
headings for its parent table element. Based on its prescribed function, the thead element may only have
tr elements as its children. Listing 7-12 shows a table with a heading row group.
Listing 7-12. A table with a table heading row group
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
Search WWH ::




Custom Search