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 (Unlocked), select the Lock and Edit link to check it out and edit the page.

1. Click any content on the page under the title to launch the toolbox.
2. Select the pencil icon to launch the Rich Text Editor.
3. Place your cursor in the area on the page you wish to insert a table.
4. Select the tableicon drop-down and choose the “Table Wizard” option. The Table Wizard box will appear.
   
   
   
5. 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.
   
6. Set the number of columns and rows the table needs. You can always add more later once the table is generated.
   
   • 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.
7. Set the width to 100%.
   • Height and Width: Sets the height and width of the table.
     • Use the percentage (%) symbol to allow the table to scale with the browser window as it resizes.
     • Avoid using pixel (px) symbol. The table will be fixed and will not re-scale with screen resizing.
     • No need to enter a table height.
   • 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.
8. Customize Table Properties tab. This is essentially the same as the table design tab, so can be skipped.
   
   
   
9. Customize Cell Properties tab. This tab shows the Rich Text Editors styling options.
   
   • NOTE: Applying a style to tables may cause accessibility issues and will add extraneous code to your table, resulting in a longer download time.
     
     
     
     
10. 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.
    
11. Change the Heading Row option to 1. This means the very first row of your table will serve as headers for the rest of the cells.
12. Change the Heading Column option to 1. This means the very first column of your table will also serve as headers for the rest of the cells. If you are unsure if your first column is a header, then select 0.
    
    • 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).
        
        
13. Add a Table Caption.
    
    
    • Table Caption: Captions are visually shown above or below the table and are connected to the table for screen readers. They align center by default, but can be changed to align left or right as well.
    • Table Summary: Leave blank
    • Associate cells with headers: Select this to connect the content in each cell with the appropriate header. Make sure this is checked.
14. Change the Heading Row option to 1. This means the very first row of your table will serve as headers for the rest of the cells.
15. After you customize your table settings, the table will appear in the editor page and look something like this:
    
    
    
    
16. 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.
17. 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.
18. Select the Accept button at the bottom right of the Rich Text Editor box.
19. Save your changes.