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|
- 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 create tables with only 1 row.
- Don't leave blank cells.
- Don't use full sentences in cells. Keep it short, brief and scannable.
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 ("-").