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 .
Tables should have alternating blue and white rows as shown below:
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:
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
- Position your cursor where you want to insert the table.
- Click on the Insert Table button.
- Click on the Table Wizard button. This opens the Table Wizard dialog box.
- 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.
- 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 .
Table Properties Explained
Specifies the height and width of the table (in pixels or percent.)
Do not change the background of your table. All tables should not have a background color.
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.
Includes setting border width, color and layout.
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.
Cell Properties Explained
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.
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.
- Right click on the table you'd like to modify.
- You can select any of the menu options to modify, delete, add and merge the rows and columns of a table.
Now it's time to make your table accessible.