Tables

On this page:

• Tables example
• What is an tables? 
• How to add an tables
• Style options 

Table example

What is a Table?

Tables should be used only for tabular data and when no other component will display the information properly. When data is added to a table that could be in another content type, it is difficult for individuals using accessibility tools to understand the message you are trying to convey.

How to add an Table

1. Click the edit link at the top of the page 

   
2. Move your cursor where you want to place the component. (Add a section if needed). 

3. Click the plus icon.

   

4. Select Table from the menu

   

Content 

1. Add a Title Caption (optional).

   

2. Add table content.
   Note: The table will properly display HTML code added to the cells. Only basic HTML code should be used such as adding a URL.

   

3. Add a single row at a time.

   

4. Expand the Change number of rows/columns if you would like to add multiple rows and columns at once. 

   

5. Change the table size as needed.

   

6. Click Rebuild Table.
   Note: When you rebuild the table any content already added will not be lost unless you remove the cells.

   
7. The Table Component can accept some basic HTML code. Below is the code that the Table can accept. You must follow accessibility standards when using HTML code
   1. <b> Bold text</b>
   2. <i>Italic text</i>
   3. <a href="https://www.medschool.ucla.edu">Sample Link</a>
   4. <a href="mailto:email@sample.com"target="_blank"> Sample Email </a>
   5. <a href="tel:5556667777"target="_blank">Call us at 555-666-7777</a>

8. Expand the Import from CSV if you would like to upload a CSV file to complete your table.

   
9. Click Choose file and select the file from your computer.

10. Click Upload CSV.

    

    
     

Styles

1. Toggle to the Styles tab. 

   
2. Select the amount of additional space you would like above the component. 
3. Select the amount of additional space you would like below the component. 
   Note: By default, there is no space below a component.
4. 

5. Select the appropriate Layout Option based on your desired layout.  (see below for examples).

   

Save

1. Click Save.

2. Scroll to the top of the page and click Save.

   

3. Click the Done button beside the save button.
   Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
    

   

Style options 

1. Layout Options settings used to create this component are: Table type: Default 
    

2. Layout Options settings used to create this component are: Table type: No Border 
    

3. Layout Options settings used to create this component are: Table type: Hover
    

4. Layout Options settings used to create this component are: Table type: Striped
    

5. Layout Options settings used to create this component are: Table type: Primary
    

5. Layout Options settings used to create this component are: Table type: Primary hover
    

5. Layout Options settings used to create this component are: Table type: Primary striped