Skip to content Skip to navigation
The University of Arizona

Creating Tables

About

Tables are useful for presenting tabular data. Individuals with visual impairments who must rely upon screen readers, can have a difficult time navigating tables unless those tables are properly formatted. Also, tables do not resize to fit the small screens on our mobile devices.

Important note: We recommend using tables for tabular data only. Avoid using tables for design and layout purposes.

Building a table requires multiple steps. To ensure that your table is accessible to as many students as possible, proceed in this order:

  1. Create the table
  2. Add your content
  3. Format column headers
  4. Format row headers
  5. Add aesthetics
  6. Check accessibility

Create a Table

1. Click the Insert Table button.

location of the insert table button in the html toolbar


steps for selecting the table size

2. Highlight the number of cells you would like to include in your table.

3. Note that you can track the number of columns by rows you have selected.

4. When you are ready, click on the last highlighted cell to insert your table.

5. When you are finished, use the Publish/Update button to save your work.


Back to top


Add your Content

steps for adding content

1. Click on an empty cell.

Note: Because the cells are collapsed, it can be difficult to navigate an empty table. The easiest way to move around an empty table is to use your keyboard. The Tab key will move you to the next cell. Arrow keys will move you in any direction.

2. Add your content.

3. When you are finished, use the Publish/Update button to save your work.


Back to top


Format the Column Headers

Screen readers read one cell at a time, from left to right, starting with the first row. If you add column headers, the screen reader can reference the associated header before reading the cell.

Steps for adding column headers to a table

1. Click on the cell you wish to format.

2. Click the down-facing triangle to open the table menu.

3. Select Cell Properties from the list.

4. Under Cell Type, click on the word "normal" to open the menu.


example of column header types

5. Select either:

  • Column Header (if you have one header per column)
  • Column Group Header (if you have column headers nested under this header)

6. Click the Update button.

7. Repeat this process for every column header in your table.

8. When you are finished, use the Publish/Update button to save your work.


Back to top


Format the Row Headers


Screen readers read one cell at a time, from left to right, starting with the first row. If you add row headers, the screen reader can reference the header before reading the cells in that row.

Steps for adding column headers to a table

1. Click on the cell you wish to format.

2. Click the down-facing triangle to open the table menu.

3. Select Cell Properties from the list.

4. Under Cell Type, click on the word "normal" to open the menu.


example of row header types

5. Select either:

  • Row Header (if you have one header per row)
  • Row Group Header (if you have row headers nested under this header)

6. Click the Update button.

7. Repeat this process for every row header in your table.

8. When you are finished, use the Publish/Update button to save your work.

Back to top


Add Aesthetics


Use can use the "Properties" options to add aesthetic formatting to a table, row, or cell.

Steps for adding column headers to a table

1. Click on the cell/column/table you wish to format.

2. Click the down-facing triangle to open the table menu.

3. Select one of the following from the list:

  • Cell properties, if you want to format the current cell only
  • Row properties, if you want to add formatting to an entire row
  • Table properties, if you want to add formatting to an entire table

4. In the window that opens, you can do the following:


Add a border color and width options
  • Table and Cell properties only - Add a colored border (the default is "none")
  • Table and Cell properties only -  Change the border width, in pixels

icon for adding a background color
  • All - Add a background color

Menus for aligning text
  • Row and Cell properties only - Align your text vertically and horizontally

menu for aligning your table

  • Table properties only - Align your table to the left, center, or right

Add cell padding

  • Table properties only - Add "pad", or empty space, between your cells

Field to add spacing around cells
  • Table properties only - Add "space" to the border areas

Note: As you add text to your table, your cells will resize accordingly. That means you do not have to use the "height" or "width" options.

5. Click the Update button.

6. If you are adding formatting to rows/cells, repeat this process for every row/cell in your table.

7. When you are finished, use the Publish/Update button to save your work.


Back to top


Check that your table is accessible

Location of accessibility checker in HTML editorClick to Enlarge Image

 

1. Click the Accessibility Checker icon, located in the lower right corner of the HTML editor (just after the spell checker icon).

2. If any issues are presented to you, click through them to address them. In some cases, the accessibility checker will assist you with fixing them, in other cases you'll need to correct them on your own and re-run the accessibility checker to confirm the issue are resolved. For a table, pay special attention to the following:

  • Whether a table caption was used at the start of the table
  • Whether the row and/or column containing the table headings is properly identified
  • Whether the heading cells are using the proper tags (<th>) and scope ("col" or "row") (this is what formatting does for you)

3. When all issues are resolved, or if no issues exist, click Close to exit the Accessibility checker.

4. When you are finished, use the Publish/Update button to save your work.


Back to top