Use the th element to specify row and column headers in data tables
In addition to using
th elements for header cells, you should also use the
headers attributes to tell user agents, primarily screen readers and other assistive technology, which header cells provide header information for any given data cell.
Explicitly associating header cells with data cells isn’t strictly necessary for very simple tables that only have one row or column of headers, but it doesn’t hurt to get in the habit of always doing so.
Here is a simple example of header cells and the
<th scope="col">Company name</th>
<th scope="col">Number of employees</th>
<th scope="col">Year founded</th>
<th scope="row">ACME Inc</th>
<th scope="row">XYZ Corp</th>
For more complex tables you may need to use the
headers attribute instead, which makes things a bit more… complex. You first need to give each header cell an
id. Next, give each data cell a
headers attribute with a space-separated list of the
id:s of the cells that provide header information for it.
Here is how the same table as above would be marked up with
id instead of
<th id="name">Company name</th>
<th id="employees">Number of employees</th>
<th id="founded">Year founded</th>
<th id="acme" headers="name">ACME Inc</th>
<td headers="acme employees">1000</td>
<td headers="acme founded">1947</td>
<th id="xyz" headers="name">XYZ Corp</th>
<td headers="xyz employees">2000</td>
<td headers="xyz founded">1973</td>
Further reading: Bring on the tables.
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
- Previous post: Design patterns and examples for colour blindness
- Next post: Results from WebAIM’s screen October 2009 screen reader user survey
Subscribe / follow
- Director, Technical Solutions at Cramer (Norwood, MA, Ma, US)
- Junior Graphic Designer at XO Group Inc. (New York City, New York, Ne, US)
- Web Developer at Blue Chip Marketing Worldwide (Northbrook, IL, Il, US)
- (re)define our guts: FarmersWeb seeking Lead Web Engineer at FarmersWeb, LLC (New York, NY, Ne, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost