Structured table
What it will look like
This is an example of 5 Structured Tables stacked on top of each other. Note that some of the structured table layout & features do not display in preview.
When to use
This content type allows us to create accessible tables that are mobile-responsive. Since over half of site visitors browse our website on a phone, this is a great option to use for most tables.
Use this when
- You want to let site visitors easily compare data
- You have an especially large table, with up to 6 data points or column headings
When to consider something else
If you have a really simple chart with few columns, you may want to create a table in a text editor which is a special type of field in Terminal 4. You can do this in text editors that have a ribbon at the top with more editing options. There are a couple content types that have this type of field:
- Scannable Paragraph
- Muliticolumn Content
If you use this type of table, make sure you check how it looks on a phone.
Simple text editor table
11th & Marquette Ramp | Ramp A | Ramp B |
---|---|---|
$5 for first hour | $4 for first hour | $4.50 for first hour |
$12 daily | $9 daily | $11 daily |
$150 monthly | $120 monthly | monthly rate not available |
Best practices
Do
- Use more than one Structured Table at a time to create more rows in your table.
- Add a table heading to help visitors better understand your table.
- Make sure you enter the table heading in the first row of your table. It won't display otherwise.
- Keep column headings and cell values short.
- Use sentence case (capitalize the first word) in cells and column headings.
- Use consistent column headings from row to row.
Don't
- Don't create tables with only 1 row.
- Don't leave blank cells.
- Don't use full sentences in cells. Keep it short, brief and scannable.
Accessibility
As you're creating your table, make sure you consider non-visual users:
- Use clear & descriptive row headings. This is how non-visual users will navigate your table.
- Don't leave cells blank. Use text instead, such as "not available", "does not apply", "no data", or even "0". Do not use dashes ("-").
Resources
CMS documentation
Accessibility
Help us improve
Send feedback to the Digital Services Team.