Skip to main content

Table

A table shows information in columns and rows.


Default (Bordered) Table

Component Preview

Default bordered table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848

Component Code

<table class="usa-table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Column header</th>
      <th scope="col">Column header</th>
      <th scope="col">Column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td>Cell data</td>
      <td>Cell data</td>
    </tr>
  </tbody>
</table>

Borderless Table

Component Preview

Borderless table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791

Component Code

<table class="usa-table usa-table--borderless">
  <!-- table content -->
</table>

Striped Table

Component Preview

Striped table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863

Component Code

<table class="usa-table usa-table--striped">
  <!-- table content -->
</table>

Compact Table

Component Preview

Compact table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress. 1776
Bill of Rights The first ten amendments of the U.S. Constitution. 1791

Component Code

<table class="usa-table usa-table--compact">
  <!-- table content -->
</table>

Stacked Table

Component Preview

Stacked table (for mobile)
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791

Component Code

<table class="usa-table usa-table--stacked">
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-label="Document title">Declaration of Independence</th>
      <td data-label="Year">1776</td>
    </tr>
  </tbody>
</table>

Scrollable Table

Component Preview

Scrollable table container
Document title Description Year Author Location
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776 Thomas Jefferson Philadelphia, PA
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791 James Madison New York, NY

Component Code

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table">
    <!-- table content -->
  </table>
</div>

Sortable Table

Component Preview

Sortable table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress. 1776
Bill of Rights The first ten amendments of the U.S. Constitution. 1791
Emancipation Proclamation An executive order granting freedom to slaves. 1863

Component Code

<table class="usa-table usa-table--sortable" data-sortable>
  <thead>
    <tr>
      <th scope="col" role="columnheader" data-sortable>Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-sort-value="sortable-value">Display value</td>
    </tr>
  </tbody>
</table>


Guidance

When to use the table component

Displaying structured data.
Use tables when you need to display structured data in rows and columns that users need to compare or analyze.
Data comparison.
Tables are ideal when users need to compare values across multiple items.

When to consider something else

Simple content lists.
For simple lists of items, consider using a list component instead of a table.
Layout purposes.
Never use tables for page layout. Use CSS grid or flexbox for layout.

Usability guidance

Use clear column headers.
Always include column headers that clearly describe the data in each column.
Include captions.
Provide a caption that summarizes the table's content for screen reader users.
Consider mobile users.
Use stacked or scrollable variants to ensure tables are usable on small screens.
Right-align numerical data.
Right-align columns containing numerical data to improve readability.

Accessibility guidance

Use proper markup.
Use <th> for headers with the scope attribute to indicate whether they are column or row headers.
Include caption.
Use the <caption> element to provide a brief description of the table.
Scrollable containers need tabindex.
Add tabindex="0" to scrollable table containers so keyboard users can scroll.

USWDS Documentation

For more guidance, view the USWDS Table Component Documentation.



Settings

Variable Description
$theme-table-border-color

Color of the table borders.
$theme-table-header-background-color

Background color of the table header.
$theme-table-header-text-color

Text color of the table header.
$theme-table-stripe-background-color

Background color of striped table rows.
$theme-table-text-color

Text color of table cells.
$theme-table-sorted-background-color

Background color of sorted column.
$theme-table-sorted-header-background-color

Background color of sorted column header.


Variants

Variant Class Description

Borderless

.usa-table--borderless

Removes borders from the table.

Striped

.usa-table--striped

Adds alternating row backgrounds.

Compact

.usa-table--compact

Reduces cell padding.

Stacked

.usa-table--stacked

Stacks table cells on mobile.

Stacked header

.usa-table--stacked-header

Stacks with row headers displayed.

Scrollable

.usa-table-container--scrollable

Wrapper class for horizontal scroll.

Sortable

.usa-table--sortable

Enables column sorting.
Looking for U.S. government information and services?
Visit USA.gov