Editing Tables

Create, Format, and Style Data Tables

Tables are a powerful way to organize and present data, but they must be built correctly to be accessible to everyone. This guide provides clear, step-by-step instructions for creating tables that are both visually effective and meet accessibility standards.

By the end of this tutorial, you’ll be able to build a properly structured table with headers, a footer, and a caption, just like the example below.

On This Page:

• Interactive Walkthrough
• Instructions
  • Create a Table
  • Insert a Header
  • Insert a Footer
  • Merge Cell
  • Add a Caption
• Best Practices
  • When to Use/Avoid Tables
• Additional Resources

Interactive Walkthrough

Instructions: Build a Table with Header, Footer, and Caption

By the end of this tutorial, you will have created a table that looks like the table below:

1. Create the initial Table

1. In the Cascade editor toolbar, click the "Table" dropdown.
2. Hover over the grid to select your desired table size. For this tutorial, choose a 3x3 table.
3. Click to insert the table.

Tip: If your new table seems too narrow, click and drag the square handle at its bottom-right corner to resize it.

4. Populate the body of your table by clicking into each cell and entering the following data:

2. Add and Format a Header Row

A header row labels each column, helping all users, especially those using screen readers, understand the data.

(1) Insert a new row at the top

1. Click on any cell in the first row (e.g., "1st").
2. In the popup toolbar that appears, click Insert row before. A new, empty row will appear at the top.

(2) Format the row as a header

1. Right-click anywhere in the new top row.
2. Hover over "Row" and select "Row Properties".
3. Click the "Row type" dropdown and select "Header". This establishes the row's semantic role.

(3) Format individual cells and add labels

1. Hightligh the first line, right-click and choose "Cell", then "Cell Properties".
2. Click the "Cell type" dropdown and select "Header cell".
3. Click the "Scope" dropdown and select "Column" (This tells screen readers that this header applies to the column below).
4. Repeat for the second and third header cells.
5. Finally, enter your column labels: Rank, Name, and Score in the three cells.

Your table should now look like this:

3. Add and Format a Footer Row

A footer row is ideal for displaying summaries or totals related to the data above.

(1) Insert a new row at the bottom

1. Click on any cell in the last row (currently "3rd / Marcus / 13 pts").
2. In the popup toolbar, click Insert row after. A new, empty row will appear at the bottom.

(2) Format the row as a footer

1. Right-click anywhere in the new bottom row.
2. Hover over "Row" and select "Row Properties".
3. Click the "Row type" dropdown and select "Footer".

(3) Add your footer content:

• In the first cell of the footer row, enter "Average Score".
• In the third cell, enter "16 pts".

4. Merge Cells (Optional)

To make "Average Score" span two columns (under Rank and Name), we need to merge cells.

1. Click into the first cell of your new footer row.
2. Hover over "Cell" and select "Merge Cell".
3. In the merge options:
   • Enter "2" in "Cols" to merge with the cell to the right
   • Leave "Rows" set to "1"
4. Click "Ok".

Now, right-click the merged cell, set its "Cell type" to "Header cell", and set "Scope" to "Row". This tells screen readers that this header applies to the footer row.

Your table should now match the preview:

5. Add a Table Caption

A caption provides a brief summary of the table's purpose, helping all users, particularly those using screen readers, to quickly understand its context.

1. Click anywhere in the table.
2. In the popup toolbar, click "Table Properties".
3. Check the "Caption" box, then click "Ok".
4. A new field appears above the table. Type your descriptive caption here (e.g., Annual robotics competition results).

Your accessible table is now complete!

Best Practices: When to Use/Avoid Tables

When to Use/Avoid Tables

Choosing the right format for your information is key to a good user experience. Use this guide to decide.

Additional Resources