Skip to main content
Design System

Tables

Basic Tables

No Classes

No classes, just basic HTML structure.
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table Foot Table Foot Table Foot Table Foot

No classes, th scope="col"

No classes, th scope="col"
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

No classes, thead th scope="col", tbody th scope="row"

No classes, thead th scope="col", tbody th scope="row"
Table Heading Table Heading Table Heading Table Heading
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

No classes, no thead, tbody th scope="row"

No classes, no thead, tbody th scope="row"
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Back to top

Striped Tables

c-table--striped, with basic HTML structure.
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table Foot Table Foot Table Foot Table Foot

Striped Table, th scope="col"

c-table--striped, th scope="col"
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Striped Table, th scope="col", tbody th scope="row"

c-table--striped, thead th scope="col", tbody th scope="row"
Table Heading Table Heading Table Heading Table Heading
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Striped Table, no thead, tbody th scope="row"

c-table--striped, no thead, tbody th scope="row"
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Back to top

Borders Tables

c-table--borders, with basic HTML structure.
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table Foot Table Foot Table Foot Table Foot

Borders Table, th scope="col"

c-table--borders, th scope="col"
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Borders Table, thead th scope="col", tbody th scope="row"

c-table--borders, thead th scope="col", tbody th scope="row"
Table Heading Table Heading Table Heading Table Heading
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Borders Table, no thead, tbody th scope="row"

c-table--borders, no thead, tbody th scope="row"
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Back to top

Striped Borders Tables

c-table--striped c-table--borders, with basic HTML structure.
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table Foot Table Foot Table Foot Table Foot

Striped Borders Table, th scope="col"

c-table--striped c-table--borders, th scope="col"
Table Heading Table Heading Table Heading Table Heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Striped Borders Table, thead th scope="col", tbody th scope="row"

c-table--striped c-table--borders, thead th scope="col", tbody th scope="row"
Table Heading Table Heading Table Heading Table Heading
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Striped Borders Table, no thead, tbody th scope="row"

c-table--striped c-table--borders, no thead, tbody th scope="row"
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Back to top

Columns Tables

Columns Table, no thead

c-table--columns, with basic HTML structure.
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table Foot Table Foot Table Foot

Columns Table, no thead, tbody th scope="row"

c-table--columns, no thead, tbody th scope="row"
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Striped Columns Table, no thead, tbody th scope="row"

c-table--columns c-table--striped, no thead, tbody th scope="row"
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell
Table Heading Table cell Table cell Table cell

Back to top