Tables

Consider the type of data you are working with when selecting which table to use. Complicated data tables should make use of the "scope" property as illustrated in Accessible Data Table. Using scope is very helpful for users trying to navigate a complicated table with a screen reader.

Table patterns

Accessible Data Table
Name	Age	Location
Sandy	26	Halifax
Don	42	Pugwash
Liana	37	Glace Bay

table-accessible.html

Bordered Data Table
Table Header	Table Header	Table Header
Content	Content	Content
Content	Content	Content
Content	Content	Content

table-bordered.html

Activity	Option A	Option B
Driving
Walking
Swimming
Flying

table-checklist.html

Condensed Data Table
Table Header	Table Header	Table Header
Content	Content	Content
Content	Content	Content
Content	Content	Content

table-condensed.html

Numerical Data Table
Name	Width	Height	Depth
Chestnut storage box	26"	34"	45"
Birch storage box	23"	43"	77"
Oak storage box	53"	44"	27"
Maple storage box	23"	52"	54"

table-numerical.html

Responsive Data Table
Table Header	Table Header	Table Header
Content	Content	Content
Content	Content	Content
Content	Content	Content

table-responsive.html

Striped Data Table
Table Header	Table Header	Table Header
Content	Content	Content
Content	Content	Content
Content	Content	Content

table-striped.html

Simple Data Table
Table Header	Table Header	Table Header
Content	Content	Content
Content	Content	Content
Content	Content	Content

table.html