Skip to main content

hero banner

Tables

Tables are used to organize and display data sets grouped in rows.

Usage, Best Practice, and Accessibility

Example

Simple data table
4-Column Responsive Table Example
Row Heading 1 Data 1 Data 2 Data 3
Row Heading 2 Data 1 Data 2 Data 3
Row Heading 3 Data 1 Data 2 Data 3
Row Heading 4 Data 1 Data 2 Data 3
Row Heading 5 Data 1 Data 2 Data 3

Note: Add citation or source information using the "Photo Credit" style

Usage

Folwell offers a standard table with the choice of a header row, a header column, or both. You can include caption and citation.

Scroll down for Drupal Lite instructions.

Adding a table

Folwell table option screenshot

Click the table icon Folwell table icon in the WYSIWYG toolbar. Select the table properties.

  • Rows - set the number of rows. This can be modified later.
  • Columns - set the number of columns. This can be modified later.
  • Width - set in pixels or percent. Leave blank to have a full width table.
  • Height - set in pixels. Leave blank to have the table height fit the content.
  • Headers - set the top row or left column as a header. See the note below for more information.
  • Cell spacing - the spacing between table cells
  • Cell padding - the spacing inside each table cell
  • Border size - the size of the border between cells. Set to 0 to have no border.
  • Alignment - this will float the table to the left or right, or center it.
  • Caption - this will add a caption above the table.
  • Summary - this attribute is optional and doesn't need to be used on all tables. Its purpose is to help screen​ ​reader users understand a complex data relationship within the table.
  • Citation - this will appear below the captions and should credit the data source.

Folwell table edit icon

An existing table can be edited by right clicking the table and choosing “Table Properties.”

A note about table headers

At least one table header must be included with your table in order for it to be accessible. The shading on your table will vary based on the header(s) you choose.

  • First row: the top row of the table will be shaded and have bold text.
  • First column: row shading begins on the second row and text in the first column is bold. Use a border on your table cells to ensure that the top row stands out as part of the table.
  • Both: the top row of the table will be shaded and the first row and first column will have bold text.

Add a Table Citation or Footnote

A Table Citation or Footnote can be added to follow the table.

The Table Citation or Footnote uses the same style as a "Photo Credit."

  1. Enter the table citation text (e.g., Note: Add source citation or footnote) and select the text.
  2. Select the "photo credit" style from the "styles" dropdown.

    Table citation example

    A note about citation/photo credits

    Currently, the citation and photo credit style can only be applied to tables that are left aligned. Alignment code needs to be added manually through "Source" in the WYSIWYG to use a citation/photo credit style with tables that are not left aligned.

    More About the Photo Credit Style

Drupal Lite

Click the table icon in the WYSIWYG toolbar. Select the table properties.

  • Rows - set the number of rows. This can be modified later.
  • Columns - set the number of columns. This can be modified later.
  • Headers - set the top row, left column, or both as headers.
  • Caption - this will add a caption above the table.

An existing table can be edited by right clicking the table and choosing “Table Properties.”

 

Best Practice

  • A good table communicates a lot of information in a concise, easy-to-understand way.
  • Position key columns from left to right, since this is how we typically read. Columns on the left will get the most attention.
  • It is common to right-align numeric columns and left-align text columns. Column names should be aligned according to column content.
  • Columns should be sized according to the data they contain.
  • Avoid using all caps, bold, and italics within a table, as these would be difficult to read.
  • A table shouldn't be used if it presents too much data on the screen. The reader's eye will have too much to try to concentrate on. It would be best for you to consider other ways to present the data.
  • If you have many pages of tabular information, consider adding a search field.
  • Tables should not be used to create layouts on websites.

Accessibility

The table design addresses the following:

  • The table heading is visually distinguished from the table rows.
  • The table rows alternate background shading to help readability.
  • The text on top of the gray background passes color contrast checkers.
  • A caption style can be added to the table to provide a summary to help visitors, and those using screen readers, understand what the table is about and decide if they want to read it.

The following customizations have been implemented to make tables fully accessible to screen readers.

  • A scope attribute has been added to identify whether a table header is a column header or a row header.
  • The header using scope="col" associates the header with the column content.
  • The cell header using scope="row" associates the header for all cells in that row.
  • Visitors are able to move through each cell using the tab key.

See the Accessible U site for more information about creating accessible tables.