Introduction

This instructional document will help people to create tables in Extension publication webpages and on Extension program webpages, provided that the tables:

• Are created to display data, not for layout
• Are simple, without merged columns or cells and without blank cells
• Include a table title (known as a caption)
• Include table headers

Note: To meet the requirements of federal law and University policies on accessibility, if tables for Extension publication and program webpages were not created as described above, you may need to adjust them and/or learn more about using HTML to create tables. Common adjustments for tables not created with accessibility in mind include:

• Changing the columns in a complex table to simplify its layout
• Splitting complex tables into multiple simple tables
• Inserting provided snippets of HTML code

To learn more, see the section on complex tables below.

Making simple tables accessible

1. Click the Create Table button in the WYSIWYG.
   • WYSIWYG stands for "what you see is what you get." It's the system that allows you to create and edit web content without having to know too much code. Its similar to how Word allows you to create and edit documents. It looks like two rows of big friendly buttons, including the buttons to bold and italicize text.
   • When working on an Extension publication webpage, the WYSIWYG is located directly under the "Webpage Version of Publications" header.  When working on an Extension program webpage, the WYSIWYG is located directly under the "Long Description - serving as your program's webpage" header.
   • The table button is in the WYSIWYG's second row's sixth button group. It looks like a dark gray and white rectangle that is divided into smaller squares.
     
2. Once you click the Create Table button, a Table Properties box will pop up.
3. On the box's Table Properties tab, complete the following fields.
   • Rows: Enter the number of rows you expect to have. You can change the number of rows in your table later.
   • Columns: Enter the number of columns you expect to have. You can change the number of columns in your table later.
   • Headers: Headers allow screenreader users to experience the table similarly to how sighted users do visually. Your table must have headers. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
     • First Row: Select if the first row of your table is labels for each column.
     • First Column: Select if the first column of your table is labels for each row.
     • Both: Select if the first row of your table is labels for each column AND the first column of your table is labels for each row. 
   • Caption: The table caption is the title of the table. For example, "Table 1: Top competitive banana eaters 2020."  Your table must have a caption. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
     
   • Note: Completing the header and caption fields provides enough accessibility markup for most simple tables. If you have a complex table on your hands, you may need to adjust it, split it into multiple tables and/or learn more about using HTML to create tables. See the section on complex tables below.
4. Click the OK button. You should now see a blank table in the WYSIWYG's text box. Important: The blank table should include a caption, and its header cells should be a different color than the regular cells. If the table you're seeing doesn't match this description, you'll need to delete the table and try again.
   
5. Enter your table's data by clicking in each of its cells and typing in the cells' values.
   • Copy and paste the values without formatting if working from an existing table. To do this, paste by holding down ctrl+shift+v. If you don't, the WYSIWYG will attempt to carry over formatting from the original document. It likely won't work well and may make your table fail to meet branding and/or acccessibility requirements. If you forget this step, you may be able to fix it by clicking the remove format button in the WYSIWYG. It's the last button in the first row. It looks like an italicized and underlined capital T next to a subscript x.
     
   • Complete all cells. Do not leave cells blank. If you are working from a table created without accessibility in mind, you may have to figure out what a blank cell meant in the mind of the table's original author. Did it mean the data collected for that cell was 0? Did it mean data for that cell was not collected at all? You may need to ask the table's original author to clarify. Then, enter the appropriate value. It's OK to enter 0, N/A or not applicable, if that's indeed what should go there. Your table must not have blank cells. If it does, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
   • Leave cells separate. Do not merge cells. It's tempting, but for accessibility, do not merge cells. If you are working from a table created without accessibility in mind, you may need to change or add more columns to avoid merged cells. Or, you may need to split the complex table into several simple tables to avoid merged cells. To learn more, see the section on complex tables below. Your table must not have merged cells. If it does, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
   • Add columns and rows, as needed. But remember, the number of columns and rows in the table must be uniform throughout it. Do not add or delete cells so that a row or column is longer or shorter than the others. Your table must have a uniform number of rows and columns. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
     • To add another row to the table, right click in it. Choose row in the box that pops up. Then, choose insert row before or insert row after. Or, click in the last cell of the last row of the table. Then, press the Tab key on your keyboard. To delete a row from the table, right click in it. Choose row in the box that pops up. Then, choose delete row.
       
     • To add another column to the table, right click in it. Choose column in the box that pops up. Then, choose insert column before or insert column after. To delete a column from the table, right click in it. Choose column in the box that pops up. Then, choose delete column.

Strategies to make complex tables accessible

Change it

This table isn't accessible. First, it's posted as an image, and text on images isn't accessible. It can't be read by screen reader users, and users who magnify the screen will struggle with a pixelated image that they have to scroll back and forth to view. Second, it includes multiple merged header cells. This would make it impossible for a screen reader to read the table to a user in a way that makes sense.

To make the above table accessible, we can change the table's layout. Be mindful that changing the table's layout can change how the data in the table is perceived. For example, changing the layout to the following places emphasis on and orders the data by the competitive banana eater's name. If the publication author or program lead would rather draw attention to and order the data by the state or number of bananas eaten instead, then we'd need to order the columns differently. Knowing the purpose of the table, the point it's trying to convey, will help you to choose the most appropriate accessible layout.

Split it

Another way to make the above inaccessible table accessible is to split it in two. Again, be mindful of how the change in layout may impact how well the table gets its point across.

Code it

Another way we can make complex tables more accessible is by sharpening our HTML skills.

Code a total row

If your table includes a total row, you'll need to add a snippet of code to your table to help make it easier to read. This doesn't do anything for screen reader users, but it does set the row apart visually for sighted users. This can increase comprehension, especially among people with cognitive impairments.

1. First, complete all of the steps under the making simple tables accessible section.
2. Then, click on the source button in the WYSIWYG. It's the first button in the first row of the WYSIWYG. It says source on it and looks like a piece of paper with a clipped right corner.
   
3. Find your table in the code by either scrolling to it or using ctrl+f to search for something unique in the table's contents.
4. Once you find your table in the code, you'll paste the following code after the closing caption tag </caption> and before the opening table header tag <thead>: <tfoot> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tfoot>
   
5. Now, switch back to regular view by clicking the source button in the WYSIWYG.
6. If the total row of your table has four cells in it, you're all set. If not, you'll need to add or remove cells from the total row until it has the same number of cells as the other rows in the table. To add cells, you'll right click in the total row, choose cell and select insert cell before or insert cell after. To remove cells, you'll right click in the total row, choose cell and select delete cell. It's important not to skip this step.  Your table must have a uniform number of rows and columns. If it doesn't, it's not accessible. Per University policy, inaccessible tables cannot be posted on our websites.
7. Finally, enter your total row's data by clicking in each cell of the row and typing in the cells' values.

Published by: Andrews, A., 2020, Adding accessible tables to Extension scholastic works or program webpages, Extension | University of Nevada, Reno

An EEO/AA Institution. Copyright © 2024, University of Nevada Cooperative Extension.
A partnership of Nevada counties; University of Nevada, Reno; and the U.S. Department of Agriculture