How to add and edit tables

Applies to: T4 Site Manager
Last updated: 20/10/2014
Summary: How to create and style accessible tables using T4 Site Manager.

Before you start

Do

Don't

Inserting a table

  1. Click on ‘Inserts a new table’ button in the WYSIWYG editor toolbar.
  2. In the pop-up window, complete the following fields:
    1. Cols: as needed.
    2. Rows: as needed.
    3. Class: see 'Table styling' below.
    4. Table caption: required - this will add an extra row to the top of your table to enter a description of the table content, eg ‘staff details’. It provides a clear and unambiguous description of the table for all users, allowing those using a screen reader to skip the table without scanning the contents if it isn’t of interest.
    5. Make first row a header: required - this tells screen readers how to scan the table.
    6. Make first column a header: optional.
  3. All other fields should be left blank.
  4. Click ‘update’.

Associating cells with the appropriate header

Table cells need to be associated with their column or row header, so that a screen reader knows how to scan the table.

The scope attribute identifies whether a header is a row or a column. You will need to insert this directly into the HTML of the table as follows:

<table>
<tr>
<th scope="col">Heading one</th>
<th scope="col">Heading two</th>
<th scope="col">Heading three</th>
<tr>
<tr>
<th scope="row">Row heading one</th>
<td>Data two</td>
<td>Data three</td>
</th>
</tr>
</table>

Styling a table

  1. Right-click table and choose ‘Edit table’ to bring up pop-up window.
  2. In the ‘class’ field, choose ‘(value)’, then type in one of the classes below.
  3. Where two classes are listed, type in both with a space between the two.

Basic

The majority of tables should use this styling.

Class to use: table-basic

Basic table example:

Funding timetable for new students
WhenActivities
August 2014 Thursday 14 August is A-level results day
September 2014 We contact graduates from the Access to Bristol scheme to confirm eligibility and advise you what to do next.
October 2014 We send emails to students confirming the funding support you have been awarded by the University

Striped

To be used on more complicated layouts and/or larger tables, where alternate striped rows may help the user identify all data across a row.

Class: table-basic table-striped

Striped table example:

Funding timetable for new students
WhenActivities
August 2014 Thursday 14 August is A-level results day
September 2014 We contact graduates from the Access to Bristol scheme to confirm eligibility and advise you what to do next.
October 2014 We send emails to students confirming the funding support you have been awarded by the University

Solid stone background

Adds a background colour to the whole table in the corporate ‘stone’ colour.

Class: table-basic table-solid

Solid stone background table example:

Funding timetable for new students
WhenActivities
August 2014 Thursday 14 August is A-level results day
September 2014 We contact graduates from the Access to Bristol scheme to confirm eligibility and advise you what to do next.
October 2014 We send emails to students confirming the funding support you have been awarded by the University

No additional styling

To use when inserting a table within a coloured module, where additional styling (borders, shading, etc) is not needed.

Class: table-basic table-no-style

No additional styling table example:

Funding timetable for new students
WhenActivities
August 2014 Thursday 14 August is A-level results day
September 2014 We contact graduates from the Access to Bristol scheme to confirm eligibility and advise you what to do next.
October 2014 We send emails to students confirming the funding support you have been awarded by the University

Extra-wide tables

Tables that stretch beyond the width of the main content area should be wrapped in a <div class="content-scroll"></div> in the HTML.

This will force the table to the width of the content area, and will apply a horizontal scrollbar to access the remaining table content.

Filterable and sortable tables

If your table is particularly long, a script can be added that allows users to filter the table using key words, and sort the columns by A to Z.

The script needs to be added by a member of the Web Editor team, and requests are handled on a best-effort basis. If you would like to add this functionality to a particular table, contact us with your request.

Further resources