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
- 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. 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.
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.
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.
- Remove alternating stripes on rows: To make all the rows in the table body white, change the table class to table-standard
- Gray background: To make a cell's background gray, add the class background-gray to the <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">
