Jump to Content

Tables

Using Tables

Every content type that uses the WYSIWYG editor can contain tables. Simply click on the 'Table' dropdown menu and select 'Insert table with column headings' or 'Insert table with column and row headings'.

e.g.

Fruit colours
Fruit	Colour
Apple	Green
Orange	Orange
Tomato	Red
Lime	Green
Blueberry	Blue
Banana	Yellow

Accessibility Considerations

Tables created using the WYSIWYG editor will meet accessibility guidelines if you add content to each cell (so don't leave any blank).

Also, the table may not be fully visible on small devices - especially in portrait orientation - if the table is wider than the screen. Usually, browsers don't let the user scroll sideways, so anything off the screen is invisible unless the user flip's their device to landscape orientation.

To remedy this shortcoming, always add a 'Mobile Friendly Tables' content type to your page (only add 1 - regardless of how many tables you have on your page). This content type adds the ability to scroll sideways (if necessary) to all tables on that page.

Table Shading

Table Options

Shading

By default, all table rows have a white background. Sometimes this makes it hard to read a line. To combat this, you can elect to have the table header, and every 2nd row shaded subtly to assist readability.

To apply shading,

Right-click anywhere on the table
Choose Table Properties
Click Advanced (on the left hand side of the popup)
In 'CSS class', add in this keyword: shaded
Click 'Save'

Table Filters

If your table is very long, you can add the ability to filter it. This adds a field where the user can enter their filter text - once something has been typed into it, only the table rows that contain that text will remain visible. How to set this feature up is detailed in a separate example page.

Background Colours

People love to use background colours on their tables but this can make the content inaccessible to some users. Common mistakes include:

Reducing the contrast ratio (between the text and the background) below legal limits.
Relying on colour, alone, to indicate different categories of items. This is useless to anyone with reduced vision, colour-blindness, or relying on a screen reader (which will not read aloud that this particular table cell is, for example, red).

These mistakes must be avoided at all costs.

Selecting Colours

We've made the first mistake easy to avoid - some of the University brand's secondary colours have been defined as table row, or table cell colours. Using these colours ensures the contrast ratio remains above the minimum threshold.

Pro Tip: Less is more - when selecting background colours, don't go mad! As a rule of thumb, your web page should contain around 5 colours (6 at a stretch) - and University pages already have Maroon and White, the Grey of the side navigation bar, and the Black of the headline(s). That's 4 (not counting the Grey of the text), so try not to use any more than 2 colours on your table, unless you have good reason.

To apply a colour to a cell (or a whole row):

Click into a cell
Choose Table - Cell - Cell Properties
or else Table - Row - Row Properties
Click 'Advanced' (on the left hand side of the popup window)
In the 'CSS class' field, enter one of the following values:

Colour	CSS class	Notes
Red	red
Blue	blue	To 1 in every 100,000 people, Blue and Dark Green are identical. To 1 in 100, they are very similar
Dark Green	green
Orange	orange	2 in every 100 will see very little difference between yellow and orange.
Yellow	yellow
Light Green	lime	To 1 in every 100, lime is very similar to both grey and orange.
Grey	grey	It can be difficult to tell grey and silver apart.
Silver	silver	It can be difficult to tell grey and silver apart.
Light Pink	pink	Pink and white are identical to 1 in every 100 people. If you set the background colour to White, the font is black, just as with all the above colours.
White	white
Normal	[no CSS class entered]	When you don't specify a class name, the font colour is a dark grey on a white background.
To a very small number of people, all the following colours groups are identical: Red & Green, Orange & Grey, Yellow & Lime & Silver, Pink & White.

Table Borders

Borders

By default, tables have no borders. Our designers had good reasons for this - it helps the flow of the page and makes it feel less crowded. This works very well when one or more of each row's cells have longer text.

Sometimes borders can aid a table's legibility, or help to isolate it from other content. For, example, the last 2 rows on the mostly coloured table, above, appear odd, because the use of background colours defined the rectangle of the table up until that point. In this case, a border would enhance the table.

To apply a border,