Why we use tables in Typecase

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

Tabular data shows sets of related information arranged in columns and rows so people can see the differences between each set.

Before you create a table, make sure 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
• rankings and reputation – users can compare the University’s rankings across national and international university guides

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.

Some people find tables difficult to read, so if the information you want to present doesn’t need to be categorised or compared in rows and columns, write it in plain text instead.

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.

Accessibility

You must make sure your content is accessible.

As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).

Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.

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. Don’t add any Markdown to format the text in tables. Typecase automatically emphasises the table headings in the first row. You can use Markdown to add links.

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 | En-suite 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.

Check your table is accessible

When you create a table in Typecase, check it’s accessible to assistive technology before you publish the page.

To do this, review the preview version of your page using a screen reader like Microsoft Narrator or Mac VoiceOver.

Listen to how the screen reader reads the information in the table to make sure it's clear to people with visual impairments.