Tables | Essential Practices for Content Creators

Essential Practices

Tables are primarily used to house data. Other than displaying data, tables should be avoided because they are not mobile friendly and they are difficult to make accessible.

Tables should only display data.

  • Should only be used to display information, not just as a way to layout text and images.
  • Headers can be in a row or column
  • Each cell in the header row (or column) must use a <th> tag.
  • The <caption> tag identifies the overall topic of the table.
    • Visible on page
    • Two-step process
      • Go to table properties and select “Caption”screenshot of table properties popup in cascade cms
      • In Editor window, enter caption above header row

table displayed in text editor in cascade cms

  • The summary attribute in <table> tag provides navigation hints (usually only for complex tables with multiple rows of headings or headings that span mulitple columns etc)
    • It’s not visible on a page
    • You must edit HTML source manually, or add after submitting through Content Checker

<table summary=”headers in first row”>table with headers in first row

 

<table summary=”headers in first column”>

table with headers in first column

Some excellent explanations and examples of simple and complex tables can be found at articles on: how to use tables.

Tables should not be used to format images and text.

Bad:

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.

What’s wrong with this?

In the mobile version of the website(shown below), you can see that the table isn’t mobile friendly and the information in the right column of the table gets cut off.

Mobile View:

mobile view of text and image in table format

Good:

Aligning your image to the left will wrap the text to the right of the image. No need for a table!

Lorem ipsum dolor sit amet, qui eligendi elaboraret ad, in vix consul dictas, qui omnium omnesque ponderum ea. Duo no agam habemus, vim ei duis option, sed id possit prompta. Te eam referrentur definitionem, cum id dicam libris, malis tractatos gloriatur ea vel. Eos cu dicant aperiam probatus.

 

Mobile View

mobile view of image align left and text

Additional Resources

Go to: Getting Started: Web Accessibility