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 if you need help.

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

Caption (a.k.a. table heading): The <caption> element functions as the heading for the table and should succinctly describe the table purpose. Every table must have a <caption>. 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. These appear in Harper blue with white text by default. In HTML, column headings should include a scope="col" attribute.
Row Headings: The first cell in each row should be coded as a row heading (<td scope="row">) and will be bolded automatically if done correctly.
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.
Merging Cells: If you are merging cells, you will need to do some additional work in HTML to ensure the table is optimized for screenreaders. This might, for example include using scope="rowgroup" for two merged header rows.

Examples

Table (default snippet)

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.

Sample Table, 2026
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 (with Subheading Rows)

The default table has a blue heading, a gray subheading row, and white cells that do not alternate in color.

Sample Table w/Subheading Row
Column 1 Heading	Column 2 Heading	Column 3 Heading
Subheading 1
Column 1	Column 2	Column 3
Column 1	Column 2	Column 3

Advanced options

Tables made using the snippet are wrapped in the following <div> to ensure that tables are scrollable on mobile devices. Be sure to update the aria-label attribute with the table's title or other description.

Alternating stripes on rows: To make all the rows alternate between a white and shaded background, add class="table-striped" to the <table> element. To remove the alternating stripes, remove the table-striped class.
Subheadings: To add rows with subheadings, add class="subheading-rows" to the <table> element. This will give a gray background to any row in the table body with a colspan attribute. You can also do this on a row-by-row basis by adding class="row-highlight" to a <td> or <th>.
More padding in cells: To make the padding around the text in each row greater, drop your cursor after the text in the column and hit Enter, then delete any extra space. This will add <p> tags around your text and increase padding/line-height. Be consistent: If you are going to have <p> tags in one cell, you must have them in all cells for the table.
Add mobile scrolling to existing table: Add this <div> before the <table> tag (and be sure to add ending </div>):
<div class="table-scroll" role="region" aria-label="Scrollable table">

Note: If there are multiple tables on the page, update the aria-label to be unique for each table.