Skip Top Navigation

Create Tables

Use tables only when the text can't be adequately displayed using bullets or numbered lists. Tables have accessibility problems and should be used sparingly.

Find out about accessibility and table accessibility  on the Toolkit Accessibility pages .

Table Style

Tables should have alternating blue and white rows as shown below:

  Zebra table example

To apply the style, add class="zebra" to the table's HTML. You cannot use the Table Wizard to apply this style. 

Be sure the first row contains tags to indicate the header:

<table class="zebra">
<tbody>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>

You may also use class="tablesorter" to allow site visitors to sort the table data by any column.

If you are using the tablesorter, you do not need to include the zebra class; it's built-in automatically.
 
Email Web Help for assistance.

How to insert a table 

  1. Position your cursor where you want to insert the table.
     
  2. Click on the Insert Table button. 

    Button for inserting table  

  3. Click on the Table Wizard button. This opens the Table Wizard dialog box.

    Tables can be created by clicking on the Table Wizard button.

  4. The Table Wizard dialog box will appear. The first tab is Table Design .

    Place your cursor in the location you'd like to modify.  Increase or decrease columns and rows by using the + and - buttons.

    Add or delete table columns by clicking on the + and - buttons.

  5. Click Insert . However, it's advised that you further customize your table.

To customize your table

Fine-tune your table by modifying your table properties.

You can access table properties two ways. Select the table properties tab in the table wizard or right-click an existing table and select set table properties .

Change table properties by right-clicking on an existing table and selecting

Table Properties Explained

  • Width/Height
    Specifies the height and width of the table (in pixels or percent.)

  • Background
    Do not change the background of your table. All tables should not have a background color.

  • Alignment
    Aligns table to the left, center or right side of the page.

  • Cell Spacing
    Increases or decreases the space between cells in a table. 

  • Cell Padding
    Increases or decreases the space between the content and the border of a cell.

  • Border
    Includes setting border width, color and layout.

  • ID
    The ID is used by developers, please disregard this option.

  • CSS Class
    Specifies table CSS class and style.

   
To customize cell properties

Fine-tune individual cells in a table by modifying cell properties.

Access cell properties two ways. Select the cell properties tab in the table wizard. Or, right-click an existing table and select set cell properties from the menu.
Change cell properties by right-clicking on an existing table and selecting

Cell Properties Explained

  • Width/Height
    Specifies the height and width of the selected cell (in pixels or percent).

  • Content Alignment
    Aligns the content within the selected cell - vertically and horizontally.

  • ID 
    The ID is used by developers, disregard this option.
     

    
To add, delete, or merge rows and columns

Once you have created a table you can easily add or delete rows and columns.

  1. Right click on the table you'd like to modify.
     
  2. You can select any of the menu options to modify, delete, add and merge the rows and columns of a table.

    Modify, merge, delete, add columns and rows by right-clicking on an existing table.