mockup for testing: Web Style Guide: Tables

test of iframes

this iframe has an advisory table added

The semantic purpose of a data table is to present tabular data. Sighted users can quickly scan the table but a screen reader goes through line by line. Proper markup must be added to help the screen reader make the correct associations that a sighted user would: making your tables accessible is a priority.

On This Page:

• Accessible tables
• Table, default
• Table, no borders
• Table, striped
• Table, no style
• Table, sortable
• Table, scrollable

• JavaScript: Datatables

---

Accessible Tables

WebCMS editor

Tables built in the WebCMS include accessibility features by default. Tables automatically include the <thead> and <tbody> tags, grouping table rows into structural elements. When header rows and columns are selected, tables are marked up using the scope attribute. These features make tables more accessible for users employing assistive technologies like screen readers.

• Adding a scope attribute with the value col to column headers links them to the data cells in the same column. Example Code: <th scope="col"
• Adding a scope with the value row to row headers makes them headers for the data cells to their right. Example Code: <th scope="row"
• Captions provide a title, name, or short description of the table, displayed on the page.
• Summaries provide longer, more in-depth descriptions highlighting the important elements of a table. They are not displayed on the page.

Complex Tables

In addition to what the WebCMS does by default, very complex or irregular tables can also be manually marked up using headers. This technique can be used to connect data cells with multiple headers in both rows and columns.

• Each column header gets a unique id.
• A headers attribute is then manually added to each data cell.
  • This attribute contains a list, separated by spaces, of the id of every column header that applies to that data cell.

Example:

Table 2: Contacts for the Fish Tissue Study

Name	Location	Phone Number	Email
Leanne Stahl	Washington, DC	(202) 566-0404	[email protected]
Hilary Snook	EPA Region 1 (CT, ME, MA, NH, RI, VT)	(617) 918-8670	[email protected]
James P. Kurtenbach	EPA Region 2 (NJ, NY)	(732) 321-6695	[email protected]

Example Code:

<thead>
<tr>
<th id="name2">Name</th>
<th id="location2">Location</th>
<th id="phone2">Phone Number</th>
<th id="email2">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name">Leanne Stahl</a></td>
<td headers="location">Washington, DC</td>
<td headers="phone">(202) 566-0404</td>
<td headers="email">[email protected]</td>
</tr>

How to:

• Use the WebCMS Editor to add a table

  

• Insert text and data, as needed.
• Select the Source button in the WYSIWYG Editor toolbar and add unique ids and headers attributes to table cells directly in the HTML, as needed.

  

Usability/Accessibility Tip: A screenreader announces the column header and the row header for each cell before reading its contents, so it is critical to use headers to create context.

Setting the height or width of the table columns and rows

It’s recommended that you let the browser resize the table cells, according to the content of the cell. You can use height and width attributes. Select the Source button in the WYSIWYG Editor toolbar and add the attributes directly in the HTML. Use either % or just the number for pixels. Using % will set the height or width of the column or row based on the table. 50% is half of the table - not half of the screen or page.

Example Code:

<th scope="col" width="100">Recently admitted US states</th>

Table, Default

The default table has borders. Row and column headers can be added via the WebCMS editor.

Manipulating table styles:

• Default table styles can be changed to remove borders or add striping
• Tables can also be made sortable
• Blue or green background colors can be applied
• In the cell properties window, table widths can be manipulated

All other styles will be stripped upon saving and publishing the page, including styles applied in the properties window.

Example, default table with a caption, header first row, and header first column:

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973
JMJ Pensions	1	1986

How to:

• Click the WebCMS editor Table button.

  

• In the table, right-click to add headers, rows, and columns as needed.

Usability/Accessibility Tip: Keep in mind that borders and stripes improve readability, by helping the eye to follow the row or column in a straight line.

Table, no borders

Here’s a table without borders, with the usa-table--borderless class applied.

Example:

Table 2: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973
JMJ Pensions	1	1986

How to:

• Click the WebCMS editor Table button.

  

• In the table window, add headers, rows, and columns as needed. Click Ok.
• In the body window, click into your table, then select Borderless Table from the Styles dropdown menu.

Table, striped

This table has zebra stripes, with the usa-table--striped class applied.

Example:

Table 3: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973
JMJ Pensions	1	1986
ACME Inc	1000	1947
XYZ Corp	2000	1973
JMJ Pensions	1	1986

How to:

• Click the table button in the WYSIWYG toolbar.

  

• In the table window, add headers, rows, and columns as needed. Click Ok.
• In the body window, click into your table, then select Striped Table from the Styles dropdown menu.

Table, no style

This table is without borders or stripes, using the usa-table--unstyled class.

Example:

Table 4: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973
JMJ Pensions	1	1986

How to:

• If you table already has styles you want to remove, in the body window, click into your table, then select Unstyled Table from the Styles dropdown menu.

Table, sortable

Adding a class, usa-table--sortable, to your table will give you basic tablesorting functionality on all columns. Here’s a sortable table, with the usa-table--sortable class applied.

Table 5: Fruit Colors

Fruit	Color
Apple	Red
Banana	Yellow
Blueberry	Blue
Grape	Purple
Lime	Green
Orange	Orange

Default Tablesorter How-To

• Click the Table button in the WYSIWYG toolbar.

  

• In the table window, add headers, rows, and columns as needed. Click Ok.
• Select the Source button, then add the usa-table--sortable class to the table tag, <table class="usa-table--sortable">. See the Sortable table rows on the U.S. Web Design System (USWDS) website for customization options.

Table, scrollable

Adding a class, usa-table-container--scrollable, to your table will give you basic table scrolling functionality on all columns. Here’s a scrollable table, with the usa-table-container--scrollable class applied. Scrollbars appear if screen size is reduced - on large screens the scrollbar won't appear.

Default Tablescrollable How-To

• Click the WebCMS editor Table button.

• In the table window, add headers, rows, and columns as needed. Click Ok.
• Select the Source button, then add the usa-table--scrollable class to the table tag and div,
  <div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table">

• See the Scrollable table rows on U.S. Web Design System (USWDS) website for customization options.

Last Table

Remove Sorting for a Specific Column

Source	Location	Issuance Date	Permit Number	Related Documents
Mystic Lake Casino Hotel	Prior Lake, MN	4/5/2022	2021-49MNSM-001	EPA Docket #   EPA-R05-OAR-2022-0110
Cintas Corporation – Green Bay	Green Bay, WI	9/9/2020	2020-49WION-001	EPA Docket #  EPA-R05-OAR-2020-0393
Maeder Brothers Quality Wood Pellets, Inc.	Weidman, MI	7/12/2018	2018-49MISC-002	EPA Docket #  EPA-R05-OAR-2018-0401
CHS Mahnomen	Mahnomen, MN	12/19/2017	MIN-WE-424510-2017-01	EPA Docket #  EPA-R05-OAR-2017-0658
Mystic Lake Casino Hotel	Prior Lake, MN	5/9/2017	MIN-SM-27139R0001-2017-01	EPA Docket #  EPA-R05-OAR-2017-0162
Mystic Lake Casino Hotel	Prior Lake, MN	7/7/2016	MIN-SM-27139R001-2016-01	Docket #  EPA-R05-OAR-2016-0679
G&K Services, Inc.   (renamed Cintas Corp. in 2018)	Green Bay, WI	9/21/2015	SYN-ON-5500900021-2014-02	Docket #   EPA-R05-OAR-2017-0159
Mystic Lake Casino Hotel	Prior Lake, MN	6/4/2015	SYN-SM-27139R0001-2012-02	Docket #  EPA-R05-OAR-2017-0431
Mystic Lake Casino Hotel	Prior Lake, MN	6/4/2015	MIN-SM-27139R0001-2013-03	Docket #  EPA-R05-OAR-2017-0499
Dakotah! Sport & Fitness  (permit reopening)	Prior Lake, MN	4/30/2015	MIN-SM27139R0004-2013-02	Docket #  EPA-R05-OAR-2017-0293
Prestige Custom Cabinetry & Millwork, Inc.	Green Bay, WI	1/27/2015	SYN-ON-55009R0004-2014-01	Docket #  EPA-R05-OAR-2017-0220
G&K Services, Inc.  (renamed Cintas Corp. in 2018)	Green Bay, WI	11/5/2014	SYN-ON-5500900021-2014-01	Docket #  EPA-R05-OAR-2017-0168
Pitlik & Wick, Inc.	Lac du Flambeau, WI	10/21/2014	SYN-LDF-5577738024-2014-01	Docket #  EPA-R05-OAR-2017-0181
Dakotah! Sport & Fitness	Prior Lake, MN	6/23/2014	MIN-SM27139R0004-2013-01	Docket #   EPA-R05-OAR-2017-0270
Mystic Lake Casino Hotel	Prior Lake, MN	6/23/2014	MIN-SM-27139R0001-2013-02	Docket #  EPA-R05-OAR-2017-0378
New Little Six Casino	Prior Lake, MN	6/23/2014	MIN-SM-27139R0005-2013-01	Docket #  EPA-R05-OAR-2017-0577
Shooting Star Casino & Event Center	Mahnomen, MN	4/15/2014	MIN-WE-27087R0001-2013-01	Docket #  EPA-R05-OAR-2017-0636
Mystic Lake Casino Hotel	Prior Lake, MN	4/9/2012	SYN-SM-27139R0001-2012-01	Docket #  EPA-R05-OAR-2017-0305