Tables, Tabs, Columns in Pilot

Tables organize information. In Pilot, you can associate table headings with columns and rows to help people using screen readers understand what they are reading.

Why Tables Matter

Tables are for data. That could include a large set of numbers representing research results. Or it could be simpler, such as a course schedule. If a table is made well, a student who’s blind can move through big data without getting lost in a sea of numbers. In each data cell, the screen reader will call out meaningful labels.

A table not made well can be very confusing to someone using a screen reader.

When working in Microsoft Word, many people incorrectly line up text in what appear to be columns by using tabs. In HTML, there are no tabs. So if you paste tabbed text into the Pilot HTML editor, the text will lose alignment and may read as gibberish.

As surely as tables should be used for data, they aren’t intended for layout. That is, it’s best not to use a table just to display things side-by-side on a page.

There are ways in HTML to create multiple columns, but Pilot’s HTML editor doesn’t have that ability built in. You probably won’t need those advanced techniques in Pilot.

Make a Table

Making a table in Pilot is a lot like making one in Microsoft Word. Click the table icon on the toolbar and select the number of rows and columns you want using the grid that pops up.

Table selection grid.
Click the cell that will give you the number of rows and columns you need.

The empty table will look kind of skinny. Once you add data to your table it will expand. We’ll use the following example.

Table of batting averages for three baseball players.
In Pilot’s editor, dashed lines show the edges of cells. With default table settings, these lines won’t be visible in your published page. You will only see text.

Table Properties

Before we get into accessibility, there are a few cosmetic things you may want to address. If you are using a template, it may already have all the table styles you need. If not, you can use Pilot’s HTML editor to add lines between cells, increase the space within cells, and make visible lines between cells.

Open Table Properties

  1. Click somewhere in the table
  2. Click the small downward-pointing arrow next to the table icon on the toolbar.
  3. Click “Table Properties.”

Some Recommended Table Values

  • Set the “Background Color” to whatever color you want the lines between cells to be. Gray looks nice. This isn’t the ideal way to make table borders visible, but it’s one way to do it without editing HTML or cascading style sheets.
  • Set “Cell Spacing” to “2.” This will make the lines between cells two pixels wide.
  • Set the “Cell Padding” to “5” so that each cell will have five pixels of space between the cell’s contents and the edge of the cell.
  • Check the “Include Caption” box, which will give you a place to type a title at the top of the table.
Table Properties options.
Choose a background color. Set the spacing to 2 and padding to 5. Check include caption.

Row properties

The above settings will create a table with a background color. The last cosmetic step is to change the background color of your rows to white. Then the cells will each have a white background and the table’s background color will show through the space between the cells.

  1. Click in a cell in the first row.
  2. Click the small downward-pointing arrow next to the table icon on the toolbar.
  3. Click “Row Properties” and choose white for the background color.
  4. Click “Update.”
The formatted table.
After you update the page, you’ll see that the data no longer looks crowded and there are lines between cells.

Make a Table Accessible

Once you have a table, you can define the header cells and associate them with rows and columns.

Column Headers

These steps make a table cell into a header that labels a column of data.

  1. Click anywhere in the cell you want to make a header.
  2. Click the small downward-pointing arrow next to the table icon on the toolbar.
  3. Click “Cell Properties.”
  4. Change “Cell Type” to “Column Header” and click “Update.”
  5. Repeat for each cell you want to be a column header. (You can only do one at a time.)
Table in editor with caption and column headers.
When the table has column headers, a screen reader will announce the name of each column as it moves across a row.

Row Headers

If your table has a label for each row in the left column, you can make those into headers the same way you make column headers, but choose “Row Header” for the cell type. Then as a screen readers moves up or down a column, it will announce the name of each row it enters.

Column and Row Groups for Merged-Cell Headers

You can merge cells to create a header that spans more than one column or more than one row. In that case, you follow the same steps as above, except you choose “Column Group Header” or “Row Group Header” for the cell type.

For in-depth information how to use headers that span multiple rows or columns, see the W3C tutorial on Tables with Irregular Headers.

Caption and Summary

If you checked the “Include Caption” box in Table Properties, there will be a space at the top of the table where you can type a caption. This should brief describe what the table is about.

If your table is complex, if it is very large or has headers in merged cells, include a summary that describes in detail how the table is laid out. Add the summary in a paragraph above the table. Or add a summary that works like alternative text. That is, it exists in the HTML where a screen reader will speak it, but it isn’t visible on the page.

Unfortunately, Pilot’s HTML editor does not include an easy way to add a summary to a table. You have to go into the HTML source and add the tags by hand. For in-depth information on ways to add a summary to a table, see the W3C tutorial on Caption and Summary.