California Design System

Tables

A table is a way to organize data using rows and columns. Since data drives tables, it helps to present data clearly so it's easy to read and understand.

Live demo

Coming soon.

Anatomy

  1. table applies base Eureka CSS to your table.
  2. caption if your table needs a description.
  3. thead that contains the header rows of your table.
  4. tbody containing the data in your table.
  5. tfoot is optional. Use it if your totaling numerical data.
  6. tr is used to insert rows into your table.
  7. th is in the thead and contains header text.
  8. td is in the tbody and contain tabular data..

Usage

Tables are typically used to present tabular data in a way that’s easy to read and is accessible to those with screen readers.

Do

  • Use tables for tabular data.
  • Use table headers, i.e., a thead tag followed by a tr tag and it's child th tag.
  • Apply accessibility features.
  • Keep it simple: Stick to clean, readable content with consistent alignment and spacing.

Don't

  • Use tables to structure web pages. We use CSS grid and flexbox instead.
  • Center text. It goes against accessibility, usability, and design best practices.
  • Nest tables or make them overly complex; it reduces readability.
  • Rely on color alone to convey meaning.

Developer notes

Tags, attributes, classes Description
table
thead
tbody
tfoot
tr
th
td

Accessibility

Element or property Description

Changelog

Date Version Affects Notes
MM/DD/YYYY 0.0.0.0 Something This is the first release.