Tables should only be used to organize data into a logical relationship grid and SHOULD NOT be used to position elements on a web page. Should a table be used for layout purposes, if absolutely necessary there is the option to use multiple simple tables, (one header row and one header) column to simplify things.

  • All tables must have row and column labels that distinguish header cells and data cells and define their relationship. 

  • Recommendation on how to create a table in Campus Suite CMS

  • Other examples of properly formatted tables

  • To use aria-describedby="” in a table that is used for layout purposes, use role=”presentation” (will hide the table from assistive technology)

  • To associate cells with their headers in tables, use scope="col" and scope="row" (helps make reading order more logical for a sight-impaired user)

  • Tables should have a <caption> tag above <table> tag, not necessary, but good practice.

  • Complex tables should have a summary="" attribute