Why we use tables in Typecase

We use tables in Typecase to show tabular data on the website.

Before you create a table, decide if your information is clearer displayed in columns and rows, rather than as plain text.

If your information needs to be cross-referenced in some way, it could benefit from being displayed in a table.

Examples of tabular data on the University website include:

• accommodation prices - users can cross-reference the type of accommodation with the price for the year
• academic year dates - users can cross-reference the start or end of a semester with the date

When not to make a table

If it's clearer and more accessible to display your content in plain text, rather than in columns and rows, don't use a table.

Plain text:

• is easier for users to read
• displays clearly on all devices
• reduces the risk of a screen reader or other assistive technology reading the information in the wrong order

Don't use a table to make your content more visually appealing or to compress more content onto a page. It's better to have a long page of accessible text than a short page of inaccessible tables.

Before you create a table

Think about how to structure the content in your table before you start.

Tables in Typecase display text or numbers in rows and columns made up of individual cells. You can't add a line break in a cell, so keep the contents of each cell brief and concise so the information is clear to people.

There's no limit to the number of columns or rows you can add, but try not to create large tables as they're harder to read on smaller devices.

Create a table

Use Markdown formatting characters to create your table.

The first row of your table displays the headings for each of the columns.

To make a row:

1. Use the pipe symbol (|), followed by your first heading, and then another pipe to create the first cell.
2. Add another heading followed by a pipe to create the second cell.
3. Repeat the process until you have enough cells for the number of columns you want in your table.

For example:

| Building | Room type | Weekly price |

On the line beneath this, add another pipe followed by a row of dashes (-). This turns the first row of your table into the heading row. Repeat the process for each column.

For example:

| Building | Room type | Weekly price |
| ------- | ------- | ------- |

Create the rest of your rows by adding a pipe before and after each piece of data until you've completed your table.

For example:

| Building | Room type | Weekly price |
| ------- | ------- | ------- |
| Woodland Court | En-suite shower | £190 to £193 |
| Marlborough Court | En-suite shower | £185 |
| Polden | Ensuite shower | £220 |

The finished table appears like this:

Using a table generator

You might find it easier to use a Markdown table generator like Tables Generator or TableConvert to format your table. You can copy and paste the Markdown from the generator into Typecase.