Create tables in CMS

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.

Tables can be one of the most inaccessible things on a website. To make tables more accessible: 

  1. Go to Table Properties (either by right-clicking an existing table or through the table wizard).
     
  2. Select the Accessibility tab.
Accessibility tab, which includes the details for creating an accessible table.



Accessibility Properties Explained
All these properties are required to be completed on each WSDOT table - except, the Summary property.

  • Heading Rows 
    Input the number of rows that your table has with headings.
     
  • Heading Columns
    Input the number or columns that include headings.
    (NOTE - Avoid tables with more than 1 row and 1 column of headings).
     
  • Caption Alignment
    Alignment of caption, leave this on left-justified.
     
  • Caption
    The caption is like a table title. Use this describe the overall purpose of your table. For example, WSDOT CMS Contacts.
     
  • Summary
    The summary is useful for more complex data. If you have weather data over a period of time - describe the changes - did the weather get warmer or cooler over specific times? It's useful to give an overall synopsis of your table data.


    Having a summary is not required on all WSDOT tables. Some tables, don't lend themselves to an overall summary. However, please use the summary option if your data can be summarized to the benefit of the user. 
     


Table Size

You can resize a table two ways:

  1. Specify dimensions in Table Properties
  2. Drag-and-drop bottom corner to expand the table to desired size.

Expand table size by dragging corner.


Table Tips

  • Simple
    Make your tables as simple as possible. Layouts with spanned rows and columns will be hardly noticeable to the average eye, but the blind users will "see" it all.
  • Avoid centering text
    If you are going to center text on the Web, the most appropriate place to do so is column headings in a table.
  • Use right-justification for dollar amounts
    If you have a column of dollar amounts, consider making the column right justified so all the decimal points line up.
  • Delete a table
    Delete a table by putting your mouse along the edge of the table. Once the cross cursor shows up (instead of an arrow cursor), click table and hit delete.