Insert a Table
Learn how to insert tables in Cascade.
Interactive Walkthrough
Instructions
Throughout this section, you will learn how to create a table with a header, footer, and caption. By the end, you should have a table like this:
| Rank | Name | Score |
|---|---|---|
| Average Score | 16 pts | |
| 1st | Sophia Ramirez | 18 pts |
| 2nd | Ethan Clarke | 17 pts |
| 3rd | Marcus Bennett | 13 pts |
Create a Table
To create a table:
- In the menubar, click the "Table" dropdown
- Under table, hover over the grid
- Select the number of rows and columns you want
Rows and columns can be added or removed later. For now, create a "3×3" table.
In the editor, the table will initially appear too narrow to see the cells. To fix this, click the square in the bottom-right corner of table and drag it to resize the table.
You can now click on any cell to add content to. Try adding the following content:
| 1st | Sophia Ramirez | 18 pts |
| 2nd | Ethan Clarke | 17 pts |
| 3rd | Marcus Bennett | 13 pts |
Insert a Header
Before we can add a header, we need a new row at the top of the table.
To add a new row (before):
- Click on a cell in the first row
- In the popup, click "Insert row before"
This will create a new row at the top of the table. Add the "Rank", "Name", and "Score" text to the new cells.
Important
It is a common mistake to bold the text in the header row, instead of following the directions below. This makes it difficult for assistive technologies to tell the difference between table data and headers, and leaves tables with broken styling.
To add a header:
- In the table, right-click the top row
- Hover over "Row" and click "Row Properties"
- Click the "Row type" dropdown and select "Header"
Next, each cell needs to be a header cell:
- Right-click the first cell in the header row
- Click the "Cell type" dropdown and select "Header cell"
- Click the "Scope" dropdown and select "Column"
Repeat for the second and third cells in the header row:
| Rank | Name | Score |
|---|---|---|
| 1st | Sophia Ramirez | 18 pts |
| 2nd | Ethan Clarke | 17 pts |
| 3rd | Marcus Bennett | 13 pts |
Insert a Footer
Now we need a new row at the bottom of the table for our footer.
To add a new row (after):
- Click on a cell in the first row
- In the popup, click "Insert row after"
This will create a new row at the bottom of the table.
To add a footer:
- In the table, right-click the bottom row
- Hover over "Row" and click "Row Properties"
- Click the "Row type" dropdown and select "Footer"
Add "Average Score" to the first cell in the footer, then enter "16pts" to the "Score" column. Change the cell type of "Average Score" to "Header cell". This cell will need to be merged with the cell to the right of it.
Merge a Cell
To merge a cell:
- In the table, right-click the cell you want to merge
- Hover over "Cell" and click "Merge Cell"
- Select the number of rows and columns to merge
- Entering "2" in "Rows" will merge the selected cell with the cell to the right
- Entering "2" in "Cols" will merge the selected cell with the cell to the bottom
Merge the "Average Score" cell with the cell to the right:
| Rank | Name | Score |
|---|---|---|
| Average Score | 16 pts | |
| 1st | Sophia Ramirez | 18 pts |
| 2nd | Ethan Clarke | 17 pts |
| 3rd | Marcus Bennett | 13 pts |
Add a Caption
Captions are used to summarize the data in a table and allow users of assistive technology to jump between tables while navigating. For accessibility, it is recommended that all tables are provided a caption.
To add a caption:
- Click the table and select "Table Properties" in the popup
- Check the "Caption" box, then click "Ok"
- Enter a caption in the new field that appeared above the table
Add "Annual robotics competition results" to the caption field:
| Rank | Name | Score |
|---|---|---|
| Average Score | 16 pts | |
| 1st | Sophia Ramirez | 18 pts |
| 2nd | Ethan Clarke | 17 pts |
| 3rd | Marcus Bennett | 13 pts |
Best Practices
Tables present a variety of accessibility challenges compared to other formats. They are often:
- Difficult to navigate on smaller devices
- Provide less structure for assistive technologies
- More complex than necessary
When to Use Tables
Tables are best used for presenting extensive, detailed data. To ensure clarity:
- Use text to describe simple relationships among data
- Present only significant data
- Break complex tables into simpler tables
When to Avoid Tables
Avoid using tables for page layout or formatting, such as two-column layouts. If your data requires only two or fewer rows and columns, consider using a paragraph or a list instead.
Additional Resources
WAI: Tables TutorialComing up Next
In the next module, learn how to use different blocks and components in Cascade.
To get started, see Blocks and Components