The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid. Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row and/or column headers. Someone that cannot see the table cannot make these visual associations, so proper markup, including table headers, must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them. You should never combine cells in a data table.
Table with no style shows caption
caption text here
| header 1 |
header 2 |
header 3 |
| data |
data |
data |
| data |
data |
data |
CSS Class: none needed
Zebra table shows caption
caption text here
| header 1 |
header 2 |
header 3 |
| data |
data |
data |
| data |
data |
data |
CSS Class: zebra
Border table shows caption
caption text here
| header 1 |
header 2 |
header 3 |
| data |
data |
data |
| data |
data |
data |
CSS Class: border
Zebra table with border
caption text here
| header 1 |
header 2 |
header 3 |
| data |
data |
data |
| data |
data |
data |
CSS Class: zebraBorder
Table with Total Row and Header Column
Testing Table Styles
| Main Category Heading |
Column 2 |
Column 3 |
Column 4 |
| Table Subheading 1 |
1 |
2 |
3 |
| Table Subheading 2 |
2 |
3 |
4 |
| Table Subheading 3 |
3 |
4 |
5 |
| Table Subheading 4 |
4 |
5 |
6 |
| Table Subheading 5 |
5 |
6 |
7 |
| Table Totals |
15 |
20 |
25 |
Table with Header Column
Testing Table Styles, part 2
| Main Category Heading |
Column 2 |
Column 3 |
Column 4 |
| Table Heading 1 |
0 |
1 |
2 |
| Table Heading 2 |
1 |
3 |
4 |
| Table Heading 3 |
2 |
5 |
6 |
| Table Heading 4 |
3 |
7 |
8 |
| Table Heading 5 |
4 |
9 |
1 |
| Table Heading 6 |
5 |
2 |
3 |
| Table Heading 7 |
6 |
4 |
5 |