Table headings have gray shading (column headings are slightly darker than row headings), and there is a light gray divider between all table cells. Table text is slightly smaller than body text.
Tables aren’t truly responsive. Once the screen becomes too narrow for the table, a shadow appears along the left and right sides, showing users that there’s more of the table off the screen that they can scroll horizontally to see.
That said, tables don’t break the responsive layout or let the text flow outside the table cells.
How to use for Basic tables
Using tables in WordPress requires a plugin. Get approval from the Web Team to use it.
The plugin lets editors insert a table with a certain number of rows and columns; merge or split table cells; add or remove table rows; copy, cut, or paste table rows; and add table headings.
Javascript adds the wrapper and shadow divs for responsiveness – don’t add them manually.
<table class="turntable">
<caption>Caption</caption> <!-- optional: class="visually-hide" -->
<thead>
<tr>
<th scope="col">Column heading</th>
<th scope="col">Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row heading</th> <!-- or td with data if no row headings -->
<td>Data</td>
</tr>
...
</tbody>
</table>
Example of Sortable tables
Sortable table
Column heading
Column heading
Column heading
Row heading 1
Data 1
Data 1
Row heading 2
Data 2
Data 2
Row heading 3
Data 3
Data 3
Tables with a visible caption
All tables should have a caption that provides an accessible description of the table contents, but the caption can either be visible or visually hidden.
Styling
Same as basic tables, but with a row directly above the table headers that displays the caption. Captions can have a Font Awesome icon before the text.
How to use for Tables with a visible caption
Same as basic tables. See “development info” for how to add a visible caption.
<table class="turntable">
<caption><i class="fa-solid fa-icon-name">Caption</caption> <!-- optional icon -->
<thead>
<tr>
<th scope="col">Column heading</th>
<th scope="col">Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row heading</th> <!-- or td with data if no row headings -->
<td>Data</td>
</tr>
...
</tbody>
</table>
Example of Tables with a visible caption
clock Table with a visible caption
Column heading
Column heading
Column heading
Column heading
Row heading
Data
Data
Data
Row heading
Data
Data
Data
Row heading
Data
Data
Data
Tables with zebra stripes
Large or complex tables can benefit from zebra striping, which makes it easier to distinguish one row from the next and to follow the data from one column to the next.
Styling
Same as basic tables, but every other row has a slightly darker background.
How to use for Tables with zebra stripes
Same as basic tables. See “development info” for how to add zebra striping.
Normal tables just need <table class="zebra">. For tables with rowspans, use <table class="zebra zebra-complex"> and add <tr class="zebra-darker"> on the rows that should be the dark stripes. The light stripes don’t need anything extra.
