Best Practice for Using Tables in MacSites

• Tables should not be used to control the layout of a page.
• Tables should have a header row and/or header column.
  • Within MacSites, this must be added within the Text editor. Please see below for a step-by-step explanation.
• Cells should not be merged as this can impact the reading order of the table.
• Complex tables should be split into simpler tables when possible, especially to avoid the use of merged cells.
• Empty cells should contain “No Data.”
• The Caption checkbox should be selected and a meaningful title should be included for the table.
• Header background colours can be changed by adding to the html code. Please see below for a step-by-step explanation.

Inserting Tables with the Visual Editor

• Insert a Table by using the Table button in the Visual editor.

• Access the Table properties button in the Visual editor.

• Select the Caption checkbox and change the Class to Full Grid if you would like cell lines to be visible.

Improving Accessibility of Tables with the Text Editor

• The image above is the html code for the Example Table at the end of this page. Modifications were necessary to optimize the accessibility of this table.
• The header row’s tags were changed from <td> (row) to <th> (header).
• An accessible background colour was added to the style tag of header row (background-color: #dbdbdd;) to add visual emphasis.
  • #dbdbdd is McMaster’s Neutral Tint colour.

Example Table