Tables

Table snippets allows you to easily create a table with a blue header row followed by rows alternating backgrounds for better readability. Columns and rows can be added or removed as needed.

Note: Tables can be a somewhat challenging with regards to accessibility. To make a table accessible requires editing HTML, even if you are using the snippet. Please submit a web request and ask the Harper Web Team to create your table.

How to add a table to your web page

Place the cursor on your page where you want the Table snippet to appear.
Click on the Snippet icon in your tool bar (it looks like a puzzle piece), then choose a Table snippet.
Edit the table as needed by adding or removing columns and updating the text.

Elements of the table

Table Heading: The table headings should be outside of the table. Do not use the first row of the table as a table heading.
Column Headings: The first row of the table should be used for column headings.
Cells: Cells should not be left blank. If there is no data for a cell, use a placeholder like N.A. (not applicable) or similar.
Caption: For accessibility, tables are required to have a caption. Captions should provide a quick overview of the table of what the table is for and generally what kind information can be found in it.

Table (default)

The default table has a blue heading with rows that alternate in color. The heading should be outside of the table. Do not use the first row of the table as a heading.

This is an example table that contains sample data.
Column 1 Heading	Column 2 Heading	Column 3 Heading
Column 1	Column 2	Column 3
Column 1	Column 2	Column 3
Column 1	Column 2	Column 3

Table - Standard

This table has a blue heading with borders around the cells and no background colors. The table heading should be outside of the table. Do not use the first row of the table as a heading. To create a Table - Standard, go into the HTML and change the table class to "table-standard".

This is an example table that contains sample data.
Column 1 Heading	Column 2 Heading	Column 3 Heading
Column 1	Column 2	Column 3
Column 1	Column 2	Column 3
Column 1	Column 2	Column 3