![[logo] US EPA](http://www.epa.gov/epafiles/images/logo_epaseal.gif){kind=logo}
Styles for Tables (of data)
Tables, if given a class of "table zebra", will be formatted like Table 2 and 3 (<table class="table zebra">). If given a class of "tablebord zebra", will be formatted like Table 1 (<table class="tablebord zebra">). If you just want alternating colored rows, simply give your table a class of "zebra" (<table class="zebra">).
There are a number of methods for creating accessible data tables. Here are two.
Tables with Borders
This table is marked up using scope.
- Adding a
scopeattribute with the valuecolto column headers links them to the data cells in the same column. - Adding a
scopewith the valuerowto row headers makes them headers for the data cells to their right.
This method is easiest for simple tables.
| Company | Employees | Founded |
|---|---|---|
| ACME Inc | 1000 | 1947 |
| XYZ Corp | 2000 | 1973 |
| JMJ Pensions | 1 | 1986 |
Tables without Borders
These tables are marked up using headers. This technique also connects data cells with their header.
- Each column header gets a unique id.
- A
headersattribute is then added to each data cell.- This attribute contains a list, separated by spaces, of the id of every column header that applies to that data cell.
This technique is more complicated, and can be reserved for very complex or irregular tables.
Table 2 and 3 demonstrate headers.
| Name | Location | Phone Number | |
|---|---|---|---|
| Leanne Stahl | Washington, DC | (202) 566-0404 | stahl.leanne@epa.gov |
| Hilary Snook | EPA Region 1 (CT, ME, MA, NH, RI, VT) |
(617) 918-8670 | snook.hilary@epa.gov |
| James P. Kurtenbach | EPA Region 2 (NJ, NY) |
(732) 321-6695 | kurtenbach.james@epa.gov |
| Employees | Founded | ||
|---|---|---|---|
| Men | Women | ||
| ACME Inc | 700 | 300 | 1947 |
| XYZ Corp | 1200 | 800 | 1973 |
| JMJ Pensions | 0 | 1 | 1986 |
Description
Please look at the source code to see the formatting for these tables. Good overviews of creating accessible tables 
are easy to find.