Tables

Tables are useful for conveying certain types of data. They should (almost) never be used for layout purposes.

Table Alternatives

Layout

Take advantage of grids available on your platform. To achieve a table-inspired layout, you can use tools like:

• Colorado.gov: Rows and cards, the Boostrap grid system, or layout builder.
• Google Sites: Use content blocks (a tool to add or edit text & images) or manually resize and add content areas as needed.
• USWDS: Take advantage of the flexible and mobile friendly layout grid.

A List of Items

In many cases, the data conveyed in a table can be shared in a more user-friendly way. One of the most commonly used alternatives is a list of items (in an unordered list or using properly nested headings and content).

Table Basics

When to Use a Table

Tables should not be used for layout purposes. Tables are appropriate to:

• Show precise numerical values & other specific data
• Compare and contrast data values with shared characteristics
• Show the presence or absence of characteristics
• Simplify complex concepts when comparable qualities are present

Best Practices

• Use table captions.
• Use table headers with explicit scopes.
• Avoid complex tables (even if they are technically sound, they may be problematic for some visitors).
• Don't use empty cells just to create space or try to improve the visual layout of a table.

Elements in a Table

• All tables should have:
  • Table row (tr) elements. These contain th and td elements.
  • Table header (th) elements.
  • Table data (td) elements.
• Many tables have:
  • Table head (thead). Table headers are typically located in the thead.
  • Table body (tbody). Table data elements are often located in a table body.
• Tables sometimes have:
  • Table foot (tfoot). This is usually a "summary" row of data.
  • Captions (caption). Captions are recommended.
  • Column group (colgroup).
• Table elements are properly associated by:
  • Table structure AND
    • Scope attributes (applied to th as either row or column). This is the recommended method for simple tables OR
    • Headers attributes (applied to td elements)