Tables

Table snippets allows you to easily create a table with a blue header row followed by rows alternating backgrounds and no cell borders 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 - 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.

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 - Striped

This 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 - Sorter

This table allows the user to re-order the rows by clicking on a column heading.

This is an example table that contains sample data.
First Name	Last Name	Age	Info	Date
Clark	Kent	18	a	Jan 12, 2003 11:14 AM
Bruce	Almighty	45	b	N.A.
John	Hood	33	c	Dec 10, 2002 5:14 AM
Peter	Parker	N.A.	d	Jul 6, 2006 8:14 AM
Bruce	Evans	22	e	Jan 18, 2007 9:12 AM