Harper College

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

  1. Place the cursor on your page where you want the Table snippet to appear.
  2. Click on the Snippet icon in your tool bar (it looks like a puzzle piece), then choose a Table snippet.
  3. 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

Last Updated: 12/17/25