Insert a Table

Tables are used to present tabular data in a visual and meaningful way. The Table Wizard helps you create a table easily and with accessibility in mind when you follow these steps.

WARNING: Adding tables to your page can severely limit accessibility compliance and mobile viewing if not created correctly. It is highly recommended that tables be used ONLY for tabular data and not for layout purposes.

NOTE: If the page you are editing is Checked in and Unlocked, select the “Lock and Edit” link to check it out and edit the page.

1. Select the pencil icon to launch the Rich Text Editor.
2. Place your cursor in the area on the page you wish to insert a table.
3. Select the tableicon drop-down and choose the “Table Wizard” option. The Table Wizard box will appear.
   
   
   
4. The Table Design tab will open by default. Here you can set how many columns and rows your table will have, the width and height of the table, and also cell spacing and padding among other things.
   
   
   • Columns and Rows: Controls the number of table columns and rows when selecting the plus (+) or minus (-) icons. As you add or delete a column or cell, the table in the Preview window will change.
   • Height and Width: Sets the height and width of the table.
     • Select the percentage (%) sizing to allow the table to scale with the browser window as it resizes.
     • Set the width to 100 to span the full size of the screen area.
   • Cell Spacing and Padding: Sets each individual table cell's spacing an padding. The larger the number, the more spacing or padding will be added.
     • Cell Spacing: Sets spacing between the cell borders
     • Cell Padding: Sets spacing between the content and the border of the cell
     • Alignment: Positions the table either aligned left, centered, or right
     • Background Color: Adds a background color to the table (see accessibility guidelines to ensure compliance)
     • CSS Class: N/A - NOT RECOMMENDED
     • Back Image: Adds a background image to your table. NOT RECOMMENDED.
5. Customize Table Properties tab. This is essentially the same as the table design tab, so can be skipped.
   
   
   
6. Customize Cell Properties tab. This tab shows the Rich Text Editor's styling options.
   • Select the drop-down to view the options and see the styling on the table example in the preview window.
   • NOTE: It is not recommended selecting these options. Applying a style to tables may cause accessibility issues and will add extraneous code to your table, resulting in a longer download time.
     
     
     
     
7. Customize Accessibility tab. It is required to make tables accessible to screen readers. This tab provides an easy method to do that without the knowledge of HTML.
   
   
   
   • Headings: Add header columns and rows to associate related data to that item.  
     • Headers are displayed on the table as an identifier to the content in the associated cells. They are displayed in bold to show a differentiation to the associated data.
     • The table example below shows Row = 1 and Column = 1 as headers. It is suggested to have Row=1 and Column=0 to keep it simple (see image in step #9).
       
       
       
       
   • Table Caption: Captions are visually shown above the table and are generally considered the title of the table. They align center by default, but can be changed to align left or right as well.
   • Table Summary: When creating a complex table, add a summary of what the table depicts for screen readers. This summary is not visually seen on the table by the user, but is read by screen readers and search engines from the HTML code.
   • Associate cells with headers: Connects the content in each cell with the appropriate header. Make sure this is checked.
8. After you customize your table settings, the table will appear in the editor page and look something like this:
   
   
   
   
9. As you enter in your header titles, you will see the header rows are bolded and center-aligned by default. This can be changed by highlighting the header and using the styling controls in the rich content editor.
10. Enter in your content into the remainder data cells.
    • If you need to modify the table properties, right-click anywhere in the table anywhere to view options.
11. Select the Accept button at the bottom right of the Rich Text Editor box.
12. Save your changes.
13. Select the Unlock  icon to check in your page if you are done editing.