Creating tables

Most people will simply edit tables rather than creating them from scratch but it is useful for everyone to know a bit about their construction. Just a bit. There are a couple of rules:

  • tables should only be used for tabular data not to assist with layout
  • tables should always have a caption to describe their contents
  • tables should have heading cells rather than bolded words.

All of these rules are important for screen readers to understand the data properly.

Place your cursor on the area of the page where you want your table to appear. Select ‘Insert / Update Table’ from the toolbar.

This will produce a pop-up window you need to complete.

Headings – select whichever arrangement fits your data best (styling will be automatically applied). The numbers of rows and columns required are entered in Table size.

Table size – insert the Rows and Columns you want, leaving the rest of the fields as they are. Some table styling will be automatically applied (ie borders).

Accessibility – insert an appropriate caption that describes the overall content of your table (leave the other fields empty). Table headings should be used to make your table accessible to screen readers.

Select Save and the table will appear on your page.

Now insert the data you have. Anything put in the heading cells will appear bolded so no need to bold it yourself.

You may of course need to edit the structure of an existing table sometimes. Right-click in a cell to see the drop-down menu (sometime this only works for the final cell of a table).

As you can see there are many options for adjusting an existing table. Pictured is converting ordinary table data cells (TD in the html) to table heading cells (TH). For other options you can of course select ‘Insert / Update Table’ from the toolbar.

If your table has more than one row (so almost every table), I would recommend adding the Scope attribute of Scope=Row or Scope=Col as covered in the next section on merging cells (even if you’re not merging cells)…

Merging cells/rows – accessibility

Sometimes you will want to merge cells or rows in a table, this is fine but it confuses some screen readers as to what heading goes with what content. This is easily fixed but every time you merge rows or cells in a table you should make sure you follow these instructions:

I have merged some cells in the Mode of Attendance category in this table but I still want  it to be recognised as the header for Full-time and Part-time students rows.

A table with some merged cells

Put your cursor in the merged cell and right-click, then select Table cell from the menu, and then Cell properties.

A CMS window showing Table Cell and Cell Properties being selected

This will open a Table Editor window and you should select Row from the drop down Scope menu in the Accessibility panel.

CMS windoe for table cell properties with 'scope' being indicated

This means Mode of Attendance is now the header for everything in that row: Full-time and Part-time students.

Scope=col is also available if your heading applies to merged cells.

Headings only – the scope attribute can only be applied to table heading cells <th> not to ordinary table data cells <td>. Which really means that for accessibility purposes we don’t merge ordinary cells. Sorry. I know. Sad face.

Complex tables – accessibility

Do you really want to do this? Ok, but you’re not going to like it. What do you do if you have a table with more than one level of headings (that include merged cells)?

A complex table with headings, subheadings and merged cells

For the top row of headings you’ll need to go into each cell and select Cell properties (as we’ve already covered above), but this time you select Scope = colgroup.

Accessibility panel with Scope=colgroup selected

You’ll need to do this for both top level headings so the screen reader understands that these headings are the same.

Then for each of the suheadings you’ll need to apply scope=col in a similar way as before. But… not for the final column, as that one has had no cell merging take place so it’s not necessary.

If your table is more complicated than that then I suggest you work out how to do it differently, probably by splitting it up into smaller tables.

And that’s how it’s done. I bet you’re pleased you asked. Anyone got a paracetamol?