Table Usage

Prerequisites

Table of Contents

1.  When to Use Tables, and When Not to Use Tables 
2.  Inserting Tables 
3.  Making Tables Accessible
   
4.  Adding or Removing Rows & Columns
   
5.  Styling Tables
   

When to Use Tables

Tables should only be used for displaying tabular data.

What is Tabular Data?

• Any kind of data displayed in rows and columns with headings is likely tabular.
  
• If it would make sense to record this data in a spreadsheet, it is likely tabular.
• Unformatted data from a database is likely tabular (rows, columns, and headings).

When Not to Use Tables

• To position or create padding for page content (unless it is tabular data).
• To add background colors or images to page content.

Table of Contents (back to top)

Inserting Tables

1. To insert a table, put a formatted text block element on the page and define it.
2. Next, click on the down arrow next to the table icon in the menu.

3. Select the number of rows and columns you want (you can always add more later).

4. Now you should have an empty table to work with.

Table of Contents (back to top)

Creating Accessible Tables

We must keep accessibility in mind when creating tables. Tables must have the following to be accessible: 

Headings

Table headings should tagged as such, instead of just making them bold. This allows consistency across the site, and helps folks using screen readers.

To add a column or row heading, do the following:

1. Click on the cell that should be the heading.
2. In the "Cell Properties" section at the bottom of the editor, check the box next to "Header."

Caption

The table's caption can be thought of as the title of the table. Some examples:

• "Department X budget from 1990 - 2010"
• "Pricing levels for Event X"

To add a table caption, do the following:

1. Click on any cell in your table.
2. Click on the <TABLE> link towards the bottom of the text editor.

3. Click on the "Advanced" button.

4. Type your table caption in the "Caption" field.

Summary

The table's summary explains the table contents, along with the basic table structure. The summary does not show up on the screen, but is read to people using screen readers. Example:

• "Full yearly budget for Department X. Horizontal headings contain years."
• "Fee structure for Event X, based on age and date. Horizontal headings contain age brackets, vertical headings contain dates."

To add a table summary, do the following:

1. Click on any cell in your table.
2. Click on the <TABLE> link towards the bottom of the text editor.

3. Click on the "Advanced" button.

4. Type your table summary in the "Summary" field.

Table of Contents (back to top)

Adding or Removing Rows & Columns

Adding or removing rows and columns is fairly simple, and there are two ways go about it:

Right-Click Method

Adding a Row or Column

1. Make sure the table has focus (click on one of the table cells).
   
2. Right-click on a cell in a row/column adjacent to the one you want to add.
   
3. Hover over Table Operations.
4. Choose the action you would like to take (add row/column before/after this one).

Removing a Row or Column

1. Make sure the table has focus (click on one of the table cells).
   
2. Right-click on a cell in the row/column you want to remove.
   
3. Hover over Table Operations.
4. Choose the action you would like to take (Remove Column or Remove Row).

Quick Method

Adding a Row or Column

1. Click on a row or column adjacent to the one you would like to add.
2. To add a row:
   
3. 1. Click the up arrow to add it above the current row.
      
   2. Click the down arrow to add it below the current row.

1. To add a column:
2. 1. Click the left arrow to add it to the left of the current column.
      
   2. Click the right arrow to add it to the right of the current column.

Deleting a Row or Column

1. Click on a cell in the row or column you would like to remove.
2. To delete a row, click on the 'x' icon to the left of the cell.

3. To delete a column, click on the 'x' icon above the cell.

Table of Contents (back to top)

Styling Tables

The default style for the tables is rather bland, so we've created some styles to help with that. Here's how to apply the style:

1. Click on the table.
2. Click on the <table> tag

3. Click on the CSS (cascading style sheets) drop-down menu.

4. Select 'data' from the list.

The table won't look any different in the editor window, but on the page it will look something like this:

Table of Contents (back to top)