Tables

  • Content Formatting, Website Theme

Inserting a table

The NatSci website theme offers several table display formats. The following tables were set up with the below property values set in the Table Properties tool.

The base property selection for all of the tables used in this article.

Accessibility Note: It is recommended to use both the 'Caption' and 'Summary' elements. The caption acts as a title and is displayed to the visual user and will be read by screen readers. Additionally, the summary should be a brief description about the content within the table, and will be read by screen readers.

Standard Table
Col 1, Row 1 Col 2, Row 1
Col 1, Row 2 Col 2, Row 2
Col 1, Row 3 Col 2, Row 3

Customizing a table

Two of Boostrap's table designs have been integrated into the NatSci theme. These include: striped rows, hover rows and a combination of the two.

These look like:

Striped Rows
Col 1, Row 1 Col 2, Row 1
Col 1, Row 2 Col 2 Row 2
Col 1, Row 3 Col 2, Row 4
Hover Rows
Col 1, Row 1 Col 2, Row 1
Col 1, Row 2 Col 2, Row 2
Col 1, Row 3 Col 2, Row 3
Striped and Hover Rows
Col 1, Row 1 Col 2, Row 1
Col 1, Row 2 Col 2, Row 2
Col 1, Row 3 Col 2, Row 3

To utilize these customizations:

  1. After inserting a table, click anywhere within the table to select it.
     
  2. Click the "Styles" dropdown menu
    Styles dropdown menu
     
  3. Select one of the three table styles listed: Striped Table, Hover Table, Striped & Hover Table
    Styles dropdown menu showing table styles.
     
  4. The table will take on that styling.
     

Accessibility Note: Based on the table properties setting of Headers, First Row, the scope="col" is generated. The scope attribute tells the browser and screen reader that everything within a column is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row. The Header options in the table properties include: First Row, First Column, Both.

WebAIM has detailed information on creating Accessible Tables