Table

A table is a structured way to organize data into rows and columns, typically used for displaying tabular information.

Code

<table class="{table-border} {table-design} {table-color}">
    <caption>Accessible description of the table</caption>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content R1 C1</td>
            <td>Content R1 C2</td>
        </tr>
        <tr>
            <td>Content R2 C1</td>
            <td>Content R2 C2</td>
        </tr>
    </tbody>
    <tfoot>
        …
    </tfoot>
</table>

Classes

To implement a style, add the class in parentheses to the <table> tag. Unless noted, these styles can be combined together.

{table-border}

Modifies how table rows are distinguished from one another visually.

Default

Presents the table without vertical lines between the rows.

Demonstration of a Default Appearance Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Bordered (.bordered)

Presents the table with a 1px border between all cells.

Demonstration of a Bordered Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Flat (.flat)

Presents the table with different shades of gray to differentiate a table header from data cells.

Demonstration of a Flat Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

{table-color}

Optionally adds light colors to the background of the table.

Default

There are no color hues used by default. All shading is grayscale.

Demonstration of a Default Appearance Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Colored (.colored)

Presents the table with a blue hue on all cells aside from row header cells.

Demonstration of a Colored Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Rainbow (.rainbow)

Presents the table with rainbow colors across all columns, omitting row header cells.

Demonstration of a Rainbow Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

{table-design}

Default

The first header row will be a middle shade of gray. Any row headers will be a light shade of gray. All data cells will have a white background.

Demonstration of a Default Appearance Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Striped (.striped)

Presents the table where every other data row is a slightly darker shade of gray compared to the default appearance.

Demonstration of a Striped Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Sectioned (.sectioned)

If a table has multiple <tbody> tags, each individual <tbody> will have a visual gap between each grouping. It only creates a visual distinction, and does not impact the readability to assistive technologies.

Demonstration of a Sectioned Table

Table Header 1	Table Header 2	Table Header 3	Table Header 4
Content R1 C1	Content R1 C2	Content R1 C3	Content R1 C4
Content R2 C1	Content R2 C2	Content R2 C3	Content R2 C4
Content R3 C1	Content R3 C2	Content R3 C3	Content R3 C4
Content R4 C1	Content R4 C2	Content R4 C3	Content R4 C4
Table Foot Content C1	Table Foot Content C2	Table Foot Content C3	Table Foot Content C4

Accessibility Expectations

Modality	Expected Behavior	Criterion
All	Table structure must be conveyed through markup. (Use table headers and other semantics)	1.3.1
All	Data table contents must be tabular content, not contents where the table is used to change the presentation.	1.3.1
All	Table headers must have clear and descriptive labels which reflect the content in their respective rows and/or columns.	2.4.6
Keyboard	All table interactions (sorting etc…) must be usable with the keyboard.	2.1.1
Screen Reader	All table headers must be associated with the correct set of content. (A column table header must be announced for the column’s data)	1.3.1
Screen Reader	The reading order of the table must be logical and follow the visual layout.	1.3.2
Screen Reader	Instructions provided for operating the table (for instance, if sorting is available) must be provided in text and associated with the table.	3.3.2

Developer Notes

The table uses standard HTML markup. As long as any tables implemented use proper HTML spec markup, you can use any of the design styles as you want.

Sortable Tables

Sortable tables are not supported by default in CDS. To implement a sortable table, you must use a button within the <th> tag with the correct ARIA values.