Tables

Use tables to display tabular data only! They should never be used for layout – that’s what stylesheets are for.

Each column in a table must have a heading, and when necessary rows can have headings listed down the left side. The headings can be smaller if needed to make some room in very large tables. Tables can also have a caption, or allow sorting alphabetically by heading.

There is no way to add a table in the WordPress editor without touching the source code.

Development info

  • Stylesheet location: /source-v6/styles/components/_tables.scss
  • *Not possible in WordPress at this point in time
    • Instead, use Qualtrics if the form is simple, or point to a page outside WordPress if the form requires JavaScript or something Qualtrics can’t do.
  • table class="turntable" for a sortable table
  • table class="small-headings" for large tables with need a little extra space
  • 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
    • 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 or bgcolor.
  • Javascript adds the wrapper and shadow divs for responsiveness – don’t add them manually.
  • <table>
      <caption>Brief description of the table contents</caption>
      <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>

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. Tables don’t break the responsive layout or let text flow outside the table cells.

Table examples
Regular table
Regular table
Column heading Column heading Column heading Column heading
Row heading Data Data Data
Row heading Data Data Data
Row heading Data Data Data
Sortable table
Sortable table
Column heading Column heading Column heading Column heading
Row heading Data 1 Data 1 Data 1
Row heading Data 2 Data 2 Data 2
Row heading Data 3 Data 3 Data 3
Table with small headings
Table with small headings
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 a visible caption
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