Skip to page content

Tables

Tables are only for tabular data. Given how they can often force users to scroll horizontally on webpages across video screen sizes, more complex tables should be in spreadsheet documents where they can be more easily navigated or reorganized into simple tables. For example, the Tarleton website's new responsive template is best at 4 or fewer table columns, so there isn't horizontal scrolling on mobile phones.

Where word processor functionality is possible (e.g. WYSIWYG editor), you should use lists (ordered/numeric or unordered/bulleted) for simple lists of ideas and tables for tabular data.

Proper Semantic Usage

  • Use a table header, not a heading (Heading 1 - 6), to identify the contents in the column or row.
  • Do not use bold (the <strong> HTML tag) to create table headers. The table cell should be defined in its properties as a header as instead of data.
  • Define the scope of a table header to its column or row to assist screen readers in identifying table cell locations.
  • Where word processor functionality is possible, never use spacing to format any alignment issues or special characters (e.g. *, !, -, +, #, ^) to lay out content.
  • Where word processor functionality is possible, never use special characters (e.g. *, !, -, +, #, ^) to emphasize the importance of something.
  • Use only one (1) space at the end of a sentence before starting a new sentence.
  • Do use bold (the <strong> HTML tag) or italics (the <em> HTML tag) on important phrases.
Bad Table Examples
Bad Table Example Why is it Ineffective?
Cats...........Number
Tabby...................1
Tuxedo................12
Calico................355
Without semantic formatting, screen readers view the alignment via the period (.) as another character in the paragraph, and it reads it as just another part of the paragraph. The line breaks do not distinguish between rows. It provide no indication that it is a table or use the table mode functionality.
Cats - Number - Bad
Tabby - 1 - No
Tuxedo - 12 - Some
Calico - 355 - All
Without semantic formatting, screen readers view the separation of columns via the hyphen (-) as another character in the paragraph, and it reads it as just another part of the paragraph. The line breaks do not distinguish between rows. It provide no indication that it is a table or use the table mode functionality.

References

Guides and How-To's

Guidelines

Simulations