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.

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 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, 

1. Right-click anywhere on the table
2. Choose Table Properties
3. Click Advanced (on the left hand side of the popup)
4. In 'CSS class', add in this keyword: shaded
5. 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):

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

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, 

1. Right-click anywhere on the table
2. Choose Table Properties
3. Click Advanced (on the left hand side of the popup)
4. In 'CSS class', add in this keyword: bordered
5. Click 'Save'