Overall, we discourage the use of tables unless absolutely necessary to represent complex data relationships. Tables should not be used to control layout.

ADA Tip with Check-mark (orange and yellow)
Avoid the use of tables as a “design element”

Avoid the use of tables unless you are displaying data that requires it.

Why? Tables are difficult to navigate - and must be carefully labeled with meaningful row and column headers. There are better ways to achieve the layout and alignment goals that people often use tables to achieve.

Add and modify tables

To create a table with borders, add a table, go to the Formats menu, and select Data table. Within a table, right-clicking (or control+clicking) will show additional cell options.

Add a table

  1. Click the “Table” Button
  2. In the dropdown list, hover or select the “Table” option, in a popup list to the right where you select the number of rows and columns you wish to have in your table. Note: You can add and remove these later if you like.
  3. This table is not finished and will be an accessibility violation, you still need to add “Table Captions”, designate the “table headers”, and add content for the table first.

Delete a table

  1. Select the table
  2. Click the “Table” button
  3. Select the “Delete table” button

Modify a Table

  1. Select the table
  2. Click the “Table” button
  3. Choose one of the options listed below

Table Properties

Table Captions

Table captions are required for accessibility purposes.

  1. Place your cursor in the table
  2. Click the table button in the toolbar
  3. Select “table properties
  4. Select the checkbox for “caption
  5. Click save.

Cell

You have the following options:

General Tab
Cell Properties

You have the following options

Width

To set a height in pixels or percentage. Note: We generally discourage using this feature as it can create complex issues and contradictions with other table cells.

Height

To set a height in pixels or percentage. Note: We generally discourage using this feature as it can create complex issues and contradictions with other table cells.

Cell type

The Default is set to “None”, which is for all content cells. At least one of these cells is required to be “Header” for all table cells. Every cell in a table must have at least one table header so screen readers have context for what is in the cell.

The Header cell or in HTML <th> is the header for all cells within it’s “scope”. A scope of  “row” would make it a header for all cells in it’s row. A scope of  “column” would make it a header for all cells in it’s row. Combine with with “merge cells” to apply the table header to more cells.

You have the following options from the drop down:

  • Cell
    Normal data cell
  • Table Header
    Specifies that the cell is a header for other cells
Scope

This is only for cells that have been designated as headers for other cells. A scope of  “column” would make it a header for all cells in it’s column. A scope of  “row” would make it a header for all cells in it’s row. Combine with with “merge cells” to apply the header to more cells.

You have the following options from the drop down:

  • Row
    Specifies that the cell is a header for a row
  • Column
    Specifies that the cell is a header for a column
  • Row group
    Specifies that the cell is a header for a group of rows
  • Column group
    Specifies that the cell is a header for a group of columns
H Align

In this drop down list you can horizontally align your text (the default is left aligned) with the following options:

  • Left
  • Right
  • Center
V Align

In this drop down list you can vertically align your text with the following options:

  • None
  • Bottom
  • Middle
  • Top
Merge cells

Use this if you have a table header or cell that applies to more than one row or column.

  1. Select the cell you want to merge with adjacent cells.
  2. Click “Merge cells” to merge two or more cells together. 
  3. Enter in a number in the pop up for the number of adjacent columns or rows you want to merge the cell with  
Split cell

If you have merged cells that you would like to un-merge or break into multiple cells

  1. Select the cell you want to un-merge and turn into adjacent cells.
  2. Click “Split cell” to un-merge two or more cells that were merged together. 
Advanced Tab

If you understand the proper way to use CSS colors using color contrast, you have the following options for styling your cells. We advise against using this option unless you have some design training and you verify the colors have the right color contrast ratio to be accessible:

  • Border color
  • Background color

Note: the style can also be written in in-line CSS in the “style” input

Row

These options apply to the current row of the cell you have selected:

  • Insert row before
  • Insert row after
  • Delete row
  • Row properties
    • Row type
      • Body
      • Header
      • Footer
    • Alignment
      • Left
      • Center
      • Right
    • Height
  • Cut row
  • Copy row
  • Paste row before
  • Paste row after

Column

These options apply to the current column of the cell you have selected:

  • Insert column before
  • Delete column

The following table is accessible.

It has a caption, Table Header and/or table cell header for  all of it’s cells.  It is not used just for layout

This is a list of good and bad children and what they will get for Christmas
Santa’s List
Name Were they good/bad? What will they get?
Dan Bad Coal
Jenny Good Toy Train
Frank Good Bike

 

Accessible Tables Tips and Tricks from w3.org

  • Keep it simple: Complex tables are more work for content creators as well as being harder to interpret for users. It’s usually better to break up complex tables into simple individual tables, each containing the data for one sub-topic.

  • Table separation: If several tables follow one another, don’t use a single table and put in an additional row of table header <th> cells. Screen readers may read aloud all table header <th> cells in a column, resulting in confusion. Start a new table tag <table> when the topic changes.

  • Data separation:

    • Make sure that each separate piece of data has its cell. Don’t use headers in one column and all data in a second column, as this will make it almost impossible for screen readers to work out the relationships between data across columns.

      On the left, a table with two columns is shown. The header for the first column reads “Shirt” and the header for the second column reads “Sizes and amount in stock”. The second row reads “Blue” in the first column and “S: 6; M: 13, XL: 10”. In the second row, Sizes for a “Red” shirt are “M: 2; L: 9; XL: 10; XXL: 1”. On the right, the table is split up in “Shirt”, “Size” and “Stock” columns.

    • Don’t use line breaks (<br> elements) to create table rows as the data in the pseudo-rows may no longer align correctly when text is resized.

      On the top there is a table where the content and header cells are not marked up correctly. Line breaks are used to make items look like they align correctly. When resizing the text (bottom) the items don’t line up anymore

  • Alignment: Align text to the left and numeric data to the right (in left-to-right languages), so that people using larger text sizes or smaller screens will be able to find it. This is especially useful if a cell spans more than one column. It’s helpful to give column headers the same alignment as the data in the cells below.

  • Styling header cells: Table header <th> elements are used for header cells, using tabular data <td> elements with different styling will make tables less accessible if not inaccessible. It is also helpful to differentiate table header <th> and tabular data <td> cells visually. For example, on these tutorial pages, header cells have a dark gray background.

  • Zebra tables: Styling even and odd rows in a different way can be helpful to people who have reading difficulties or who enlarge text. It acts as a visual guide. Highlighting the cell (and row/column) on mouseover and keyboard focus to support people to see where they are. Make sure that the contrast ratio between the text and background is good for both headers and data cells. Here is how to check the contrast ratio.

  • Flexibility: Due to the layout model of tables, they sometimes don’t fit on small screens small or are too wide if the user is zooming in. In such circumstances, it’s important that the table isn’t cut off (for example by using overflow: hidden in Cascading Style Sheets CSS). In these tutorials overflow: scroll is applied to an element wrapping the table so users can scroll through the table horizontally but there are much more options to display table in such circumstances.

Status: Updated 23 April 2017 (first published September 2014). Editors: Eric EggertShadi Abou-Zahra. Contributors: Anna Belle Leiserson. the Web Content Accessibility Guidelines Working Group (WCAG WG), the Education and Outreach Working Group (EOWG). Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme. [Attributions] [Changelog]. Copyright © 2014 W3C ® (MITERCIMKeioBeihangUsage policies apply.