Web services

Tables

Use tables to display tabular data only, never for layout!

Each column in a table must have a heading, and when necessary rows can have headings listed down the left side. Tables can also have a caption, or allow alphabetical sorting by heading.

Using tables in WordPress requires a plugin. Get approval from the Web Team to use it.

Styling

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.

Responsive behavior

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 table to see off the screen that they can scroll horizontally to see. Tables don’t break the responsive layout or let the text flow outside the table cells.

Development info
  • Stylesheet location: /_source/styles/components/_tables.scss
  • Use <table class="turntable"> for a sortable table.
  • Use <table class="zebra"> for a table with zebra-striped rows.
    • 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.
  • All forms should have a <caption> for accessibility reasons
    • You can use <caption class="visually-hide"> if you don’t want the caption to be visible.
    • Captions can have a Font Awesome icon before the text, right after the opening <caption> tag.
    • <table summary=""> is deprecated, use <caption> instead.
  • All forms should have a <thead> that contains the column headings and a <tbody> that contains the rest of the form cells.
  • All column and row headings should use the table header tag (<th>), and include either scope="col" or scope="row" depending on the header type.
  • Don’t ever leave the first column heading blank, even if there are row headings. This is bad for accessibility.
  • Don’t add other style elements to the table cells, such as valign, width, height, bgcolor, or style="".
  • Javascript adds the wrapper and shadow divs for responsiveness – don’t add them manually.
  • <table>
  <caption>Brief description of the table contents</caption> <!-- can include class="visually-hide" if you don't want it visible -->
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"></th> <!-- or td if no row headings -->
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row"></th><!-- or td if no row headings -->
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Table examples

Regular table (with an optional footer)
Regular table
Column heading Column heading Column heading Column heading Column heading Column heading
Row heading Data Data Data Data Data
Row heading Data Data Data Data Data
Row heading Data Data Data Data Data
Row heading Data Data Data Data Data
Footer heading Data Data Data Data Data
Sortable table
Sortable table
Column heading Column heading Column heading Column heading
Row heading 1 Data 1 Data 1 Data 1
Row heading 2 Data 2 Data 2 Data 2
Row heading 3 Data 3 Data 3 Data 3
Table with a visible caption
clockTable 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
Table with zebra stripes
Table with zebra stripes
Column heading Column heading Column heading Column heading
Row heading 1 Data 1 Data 1 Data 1
Row heading 2 Data 2 Data 2 Data 2
Row heading 3 Data 3 Data 3 Data 3
Row heading 4 Data 4 Data 4 Data 4

If the table has rowspans, you’ll need to hardcode the stripes:

Complex table with zebra stripes
Column heading Column heading Column heading Column heading
Row heading 1 Data 1.1 Data 1.1 Data 1.1
Data 1.2 Data 1.2 Data 1.2
Row heading 2 Data 2.1 Data 2.1 Data 2.1
Data 2.2 Data 2.2 Data 2.2
Row heading 3 Data 3.1 Data 3.1 Data 3.1
Data 3.2 Data 3.2 Data 3.2
Row heading 4 Data 4.1 Data 4.1 Data 4.1
Data 4.2 Data 4.2 Data 4.2