Minnesota Department of Transportation

511 Travel Info

Design system

Tables

Tables can have several different looks depending on the content.

Default

table with no class
Column 1 header Column 2 header Column 3 header Column 1 header
Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 5 Data cell 6 Data cell 7 Data cell 8
Data cell 9 Data cell 10 Data cell 11 Data cell 12
Data cell 13 Data cell 14 Data cell 15 Data cell 16

Rows

table class="tableRows"
Column 1 header Column 2 header Column 3 header Column 1 header
Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 5 Data cell 6 Data cell 7 Data cell 8
Data cell 9 Data cell 10 Data cell 11 Data cell 12
Data cell 13 Data cell 14 Data cell 15 Data cell 16
Total Cell 1 Total Cell 2 Total Cell 3 Total Cell 4
table class="tableRowsPlain"
Column 1 header Column 2 header Column 3 header Column 1 header
Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 5 Data cell 6 Data cell 7 Data cell 8
Data cell 9 Data cell 10 Data cell 11 Data cell 12
Data cell 13 Data cell 14 Data cell 15 Data cell 16

Columns

table class="tableColumns"
Column 1 header Column 2 header Column 3 header Column 1 header
Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 5 Data cell 6 Data cell 7 Data cell 8
Data cell 9 Data cell 10 Data cell 11 Data cell 12

Borders

table class="tableBorders"
Column 1 header Column 2 header Column 3 header Column 1 header
Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 5 Data cell 6 Data cell 7 Data cell 8
Data cell 9 Data cell 10 Data cell 11 Data cell 12

No styles

table class="tableNoStyles"
Column 1 header Column 2 header Column 3 header Column 1 header
Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 5 Data cell 6 Data cell 7 Data cell 8
Data cell 9 Data cell 10 Data cell 11 Data cell 12