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:
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 ("-").
Help us improve
Send feedback to the Digital Services Team.