Reskin - Table Styles

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
Last updated May 8, 2019