Skip to content

Archive: Tables - Best Practices

Please note: this has content related to an outdated template no longer in use.

Tables should be used whenever you have tabular data to display. Their purpose is to make that data readable, scannable and easily comparable. To build a table in the OU Editor, start with the table tool (). Use the table tool to add or delete columns and rows. You can add classes to the entire table by selecting the table tool and then choosing table properties. Add classes to individual table cells by selecting the table tool and then choosinng cell > cell properties.

Build a Basic Table

 

This example table will consist of  five columns and seven rows. In the editor, click on the table tool and hover over Insert Table. A selection window will open. Drag across and down to select the number of columns and rows for the table.

The table will appear on the page in a condensed format because at this point it contains no data. To expand the table and choose how it will appear, go back to the table tool and select Table Properties.

In Table Properites, there is a Class drop-down. Clicking on the drop-down, will open a list. The classes at the top of the list apply to text. Scroll down past the text and image classes to the table class choices. This example uses the "Table with Header Shade & Borders" class.

I have added some data to the table. The next step is to add settings that will make the table accessible. Before these settings are added, a screen reader would read each cell from left to right and top to bottom. The third row would be read as "White blanco blanc bán gwyn" without any reference to which language each word belonged to.

Color Spanish French Irish Welsh
Black negro noir dubh du
White blanco blanc bán gwyn
Red rojo rouge ruadh coch
Blue azul bleu gorm glas
Green verde vert glas gwyrdd
Yellow amarillo jaune bui melyn

Accessible Tables

Each cell in the top row is a category for the words in that column. Sighted users can determine this relationship by scanning the table. To make this relationship clear to screen reader users, these cells need to become header cells with a scope of column.

header cell and scope column selectionsTo do so, select each cell in the top row then go to the table tool. Click on Cell  > Cell properties. Once the Cell Properties window opens, choose the Cell Type: Header Cell and Scope: Column. Click OK. The header cells in the top row now have a light gray background and bold text.

This styling depends on the settings in the Cell Properties window and on the class chosen in Table Properties. If you want the light gray background and bold text for header cells, choose a class that contains "Header Shade."

Color Spanish French Irish Welsh
Black negro noir dubh du
White blanco blanc bán gwyn
Red rojo rouge ruadh coch
Blue azul bleu gorm glas
Green verde vert glas gwyrdd
Yellow amarillo jaune bui melyn

header cell and scope row selectionsIn the next step, select the cells containing Black, White, Red, Blue, Green and Yellow text. Click on Cell  > Cell properties. Once the Cell Properties window opens, choose the Cell Type: Header Cell and Scope: Row. Click OK.

table caption check boxAs a final step, add a table caption. Place your cursor anywhere inside the table. Go to the table tool and select Table Properties. Check the Caption check box. An area for the caption will open directly above the table. Add "Color Names in Multiple Languages" and then click outside of the table. The table caption is now in place.

The table now has the accessibility settings of header cells, scope for columns, scope for rows and a table caption.

A screen reader would now read the third line as:

White, Spanish: blanco
White, French: blanc
White, Irish: bán
White, Welsh: gwyn

 Color Names in Multiple Languages
Color Spanish French Irish Welsh
Black negro noir dubh du
White blanco blanc bán gwyn
Red rojo rouge ruadh coch
Blue azul bleu gorm glas
Green verde vert glas gwyrdd
Yellow amarillo jaune bui melyn
Last Updated: 11/8/23