Components

Table

A table shows information in columns and rows.

Passed WCAG 2.1 AA

Tables help logically organize information and group like things together, and they make it easier to understand complex content, as explained on plainlanguage.gov. They’re especially useful for showing long lists of sequential or structured content. Users read tables one row or column at a time, making it easy to digest and compare information.

Tables also help users find specific information within a large data set. For example, if someone is looking for how much their tax is based on their income for a particular year, it’s much easier to find the intersection of that year and income range than to scan or read an entire paragraph of text.

Standard table

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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 

<table class="usa-table">
  <caption>
    Bordered table
  </caption>
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
  </tbody>
</table>

Striped table

A striped table can improve readability by visually grouping row content with alternating background colors.

Bordered table with horizontal stripes
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 

<table class="usa-table usa-table--striped">
  <caption>
    Bordered table with horizontal stripes
  </caption>
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
  </tbody>
</table>

Borderless table

A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.

Borderless table: A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 

<table class="usa-table usa-table--borderless">
  <caption>
    Borderless table: A borderless table can be useful when you want the
    information to feel more a part of the text it accompanies and extends.
  </caption>
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
  </tbody>
</table>

Scrollable table

A scrollable table is ideal for dense data.

Scrollable 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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Scrollable table with horizontal stripes
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Compact scrollable 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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Compact scrollable table with horizontal stripes
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table">
    <caption>
      Scrollable table
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Declaration of Independence</th>
        <td>
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td>1776</td>
      </tr>
      <tr>
        <th scope="row">Bill of Rights</th>
        <td>
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td>1791</td>
      </tr>
      <tr>
        <th scope="row">Declaration of Sentiments</th>
        <td>
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td>1848</td>
      </tr>
      <tr>
        <th scope="row">Emancipation Proclamation</th>
        <td>
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td>1863</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--striped">
    <caption>
      Scrollable table with horizontal stripes
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Declaration of Independence</th>
        <td>
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td>1776</td>
      </tr>
      <tr>
        <th scope="row">Bill of Rights</th>
        <td>
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td>1791</td>
      </tr>
      <tr>
        <th scope="row">Declaration of Sentiments</th>
        <td>
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td>1848</td>
      </tr>
      <tr>
        <th scope="row">Emancipation Proclamation</th>
        <td>
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td>1863</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--compact">
    <caption>
      Compact scrollable table
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Declaration of Independence</th>
        <td>
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td>1776</td>
      </tr>
      <tr>
        <th scope="row">Bill of Rights</th>
        <td>
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td>1791</td>
      </tr>
      <tr>
        <th scope="row">Declaration of Sentiments</th>
        <td>
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td>1848</td>
      </tr>
      <tr>
        <th scope="row">Emancipation Proclamation</th>
        <td>
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td>1863</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--compact usa-table--striped">
    <caption>
      Compact scrollable table with horizontal stripes
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Declaration of Independence</th>
        <td>
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td>1776</td>
      </tr>
      <tr>
        <th scope="row">Bill of Rights</th>
        <td>
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td>1791</td>
      </tr>
      <tr>
        <th scope="row">Declaration of Sentiments</th>
        <td>
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td>1848</td>
      </tr>
      <tr>
        <th scope="row">Emancipation Proclamation</th>
        <td>
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td>1863</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive stacked table

A responsive stacked table collapses at narrow widths for better readability on small screens.

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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Stacked borderless table (when on a mobile-width screen)
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Stacked bordered table with headers (when on a mobile-width screen)
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Stacked borderless table with headers (when on a mobile-width screen)
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 

<div class="table-example-container">
    <div class="width-mobile">
  <table class="usa-table usa-table--stacked">
    <caption>
      Bordered table
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Independence
        </th>
        <td data-label="Description">
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td data-label="Year">1791</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Sentiments
        </th>
        <td data-label="Description">
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td data-label="Year">1848</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Emancipation Proclamation
        </th>
        <td data-label="Description">
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td data-label="Year">1863</td>
      </tr>
    </tbody>
  </table>
</div>

    <div class="width-mobile">
  <table class="usa-table usa-table--stacked usa-table--borderless">
    <caption>
      Stacked borderless table (when on a
      <span class="text-no-wrap">mobile-width</span>
      screen)
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Independence
        </th>
        <td data-label="Description">
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td data-label="Year">1791</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Sentiments
        </th>
        <td data-label="Description">
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td data-label="Year">1848</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Emancipation Proclamation
        </th>
        <td data-label="Description">
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td data-label="Year">1863</td>
      </tr>
    </tbody>
  </table>
</div>

    <div class="width-mobile">
  <table class="usa-table usa-table--stacked-header">
    <caption>
      Stacked bordered table with headers (when on a mobile-width screen)
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Independence
        </th>
        <td data-label="Description">
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td data-label="Year">1791</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Sentiments
        </th>
        <td data-label="Description">
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td data-label="Year">1848</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Emancipation Proclamation
        </th>
        <td data-label="Description">
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td data-label="Year">1863</td>
      </tr>
    </tbody>
  </table>
</div>

    <div class="width-mobile">
  <table class="usa-table usa-table--stacked-header usa-table--borderless">
    <caption>
      Stacked borderless table with headers (when on a mobile-width screen)
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Independence
        </th>
        <td data-label="Description">
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td data-label="Year">1791</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Declaration of Sentiments
        </th>
        <td data-label="Description">
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td data-label="Year">1848</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">
          Emancipation Proclamation
        </th>
        <td data-label="Description">
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td data-label="Year">1863</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Sortable table rows

A sorted column changes the row ordering based on alphabetical or numeric cell values.

Recently admitted US states (sortable table example)
Name Order admitted to union Date of ratification vote Date admitted to union Percent of voters in favor of ratification Votes cast in favor of ratification Estimated population at time of admission
Hawaii 50th Jun. 27, 1959 Aug. 21, 1959 94.3% 132,773 632,772
Alaska 49th Apr. 24, 1956 Jan. 3, 1959 68.1% 17,477 226,167
Arizona 48th Feb. 9, 1911 Feb. 14, 1912 78.7% 12,187 204,354
New Mexico 47th Nov. 5, 1911 Jan. 6, 1912 70.3% 31,742 327,301
Oklahoma 46th Sep. 17, 1907 Nov. 16, 1907 71.2% 180,333 1,657,155
Utah 45th Nov. 5, 1895 Jan. 4, 1896 80.5% 31,305 210,779

Data for illustration purposes only.

Sortable striped table with various content types
Alphabetical Month Percent Count Rank (Ordinal) Rank (Cardinal) Unix Timestamp
Tango March 20.6% 23,612 Third 3rd March 27, 2012
Foxtrot April 2.6% -32 First 1st April 9, 2021
Hilo January -3.6% 0.002 Second 2nd January 20, 2021
Bravo December -300.6% 0 Fourth 4th December 16, 2020
Sortable borderless table with various content types
Alphabetical Month Percent Count Rank (Ordinal) Rank (Cardinal) Unix Timestamp
Tango March 20.6% 23,612 Third 3rd March 27, 2012
Foxtrot April 2.6% -32 First 1st April 9, 2021
Hilo January -3.6% 0.002 Second 2nd January 20, 2021
Bravo December -300.6% 0 Fourth 4th December 16, 2020 

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table">
    <caption>
      Recently admitted US states (sortable table example)
    </caption>
    <thead>
      <tr>
        <th data-sortable scope="col" role="columnheader">Name</th>
        <th
          data-sortable
          scope="col"
          role="columnheader"
          aria-sort="descending"
        >
          Order admitted to union
        </th>
        <th data-sortable scope="col" role="columnheader">
          Date of ratification vote
        </th>
        <th data-sortable scope="col" role="columnheader">
          Date admitted to union
        </th>
        <th data-sortable scope="col" role="columnheader">
          Percent of voters in favor of ratification
        </th>
        <th data-sortable scope="col" role="columnheader">
          Votes cast in favor of ratification
        </th>
        <th data-sortable scope="col" role="columnheader">
          Estimated population at time of admission
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" role="rowheader">Hawaii</th>
        <td data-sort-value="50">50th</td>
        <td data-sort-value="331844400">Jun. 27, 1959</td>
        <td data-sort-value="327092400">Aug. 21, 1959</td>
        <td
          data-sort-value="0.943"
          class="font-mono-sm text-tabular text-right"
        >
          94.3%
        </td>
        <td
          data-sort-value="132773"
          class="font-mono-sm text-tabular text-right"
        >
          132,773
        </td>
        <td
          data-sort-value="632772"
          class="font-mono-sm text-tabular text-right"
        >
          632,772
        </td>
      </tr>
      <tr>
        <th scope="row" role="rowheader">Alaska</th>
        <td data-sort-value="49">49th</td>
        <td data-sort-value="431978400">Apr. 24, 1956</td>
        <td data-sort-value="346960800">Jan. 3, 1959</td>
        <td
          data-sort-value="0.681"
          class="font-mono-sm text-tabular text-right"
        >
          68.1%
        </td>
        <td
          data-sort-value="17477"
          class="font-mono-sm text-tabular text-right"
        >
          17,477
        </td>
        <td
          data-sort-value="226167"
          class="font-mono-sm text-tabular text-right"
        >
          226,167
        </td>
      </tr>
      <tr>
        <th scope="row" role="rowheader">Arizona</th>
        <td data-sort-value="48">48th</td>
        <td data-sort-value="1858528800">Feb. 9, 1911</td>
        <td data-sort-value="1826560800">Feb. 14, 1912</td>
        <td
          data-sort-value="0.787"
          class="font-mono-sm text-tabular text-right"
        >
          78.7%
        </td>
        <td
          data-sort-value="12187"
          class="font-mono-sm text-tabular text-right"
        >
          12,187
        </td>
        <td
          data-sort-value="204354"
          class="font-mono-sm text-tabular text-right"
        >
          204,354
        </td>
      </tr>
      <tr>
        <th scope="row" role="rowheader">New Mexico</th>
        <td data-sort-value="47">47th</td>
        <td data-sort-value="1835287200">Nov. 5, 1911</td>
        <td data-sort-value="1829930400">Jan. 6, 1912</td>
        <td
          data-sort-value="0.703"
          class="font-mono-sm text-tabular text-right"
        >
          70.3%
        </td>
        <td
          data-sort-value="31742"
          class="font-mono-sm text-tabular text-right"
        >
          31,742
        </td>
        <td
          data-sort-value="327301"
          class="font-mono-sm text-tabular text-right"
        >
          327,301
        </td>
      </tr>
      <tr>
        <th scope="row" role="rowheader">Oklahoma</th>
        <td data-sort-value="46">46th</td>
        <td data-sort-value="1965751200">Sep. 17, 1907</td>
        <td data-sort-value="1960567200">Nov. 16, 1907</td>
        <td
          data-sort-value="0.712"
          class="font-mono-sm text-tabular text-right"
        >
          71.2%
        </td>
        <td
          data-sort-value="180333"
          class="font-mono-sm text-tabular text-right"
        >
          180,333
        </td>
        <td
          data-sort-value="1657155"
          class="font-mono-sm text-tabular text-right"
        >
          1,657,155
        </td>
      </tr>
      <tr>
        <th scope="row" role="rowheader">Utah</th>
        <td data-sort-value="45">45th</td>
        <td data-sort-value="2340122400">Nov. 5, 1895</td>
        <td data-sort-value="2334938400">Jan. 4, 1896</td>
        <td
          data-sort-value="0.805"
          class="font-mono-sm text-tabular text-right"
        >
          80.5%
        </td>
        <td
          data-sort-value="31305"
          class="font-mono-sm text-tabular text-right"
        >
          31,305
        </td>
        <td
          data-sort-value="210779"
          class="font-mono-sm text-tabular text-right"
        >
          210,779
        </td>
      </tr>
    </tbody>
  </table>
  <div
    class="usa-sr-only usa-table__announcement-region"
    aria-live="polite"
  ></div>
  <p class="margin-bottom-3">Data for illustration purposes only.</p>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--striped">
    <caption>
      Sortable striped table with various content types
    </caption>
    <thead>
      <tr>
        <th data-sortable scope="col" role="columnheader">Alphabetical</th>
        <th data-sortable scope="col" role="columnheader">Month</th>
        <th data-sortable scope="col" role="columnheader">Percent</th>
        <th data-sortable scope="col" role="columnheader">Count</th>
        <th data-sortable scope="col" role="columnheader">Rank (Ordinal)</th>
        <th data-sortable scope="col" role="columnheader">Rank (Cardinal)</th>
        <th data-sortable scope="col" role="columnheader">Unix Timestamp</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Tango</th>
        <td data-sort-value="3">March</td>
        <td
          data-sort-value="0.206"
          class="font-mono-sm text-tabular text-right"
        >
          20.6%
        </td>
        <td
          data-sort-value="23612"
          class="font-mono-sm text-tabular text-right"
        >
          23,612
        </td>
        <td data-sort-value="3">Third</td>
        <td data-sort-value="3">3rd</td>
        <td data-sort-value="1332884673452">March 27, 2012</td>
      </tr>
      <tr>
        <th scope="row">Foxtrot</th>
        <td data-sort-value="4">April</td>
        <td
          data-sort-value="0.026"
          class="font-mono-sm text-tabular text-right"
        >
          2.6%
        </td>
        <td data-sort-value="-32" class="font-mono-sm text-tabular text-right">
          -32
        </td>
        <td data-sort-value="1">First</td>
        <td data-sort-value="1">1st</td>
        <td data-sort-value="1617974313232">April 9, 2021</td>
      </tr>
      <tr>
        <th scope="row">Hilo</th>
        <td data-sort-value="1">January</td>
        <td
          data-sort-value="-0.036"
          class="font-mono-sm text-tabular text-right"
        >
          -3.6%
        </td>
        <td
          data-sort-value="0.002"
          class="font-mono-sm text-tabular text-right"
        >
          0.002
        </td>
        <td data-sort-value="2">Second</td>
        <td>2nd</td>
        <td data-sort-value="1611169964684">January 20, 2021</td>
      </tr>
      <tr>
        <th scope="row">Bravo</th>
        <td data-sort-value="12">December</td>
        <td
          data-sort-value="-3.006"
          class="font-mono-sm text-tabular text-right"
        >
          -300.6%
        </td>
        <td data-sort-value="0" class="font-mono-sm text-tabular text-right">
          0
        </td>
        <td data-sort-value="4">Fourth</td>
        <td data-sort-value="4">4th</td>
        <td data-sort-value="1608114345343">December 16, 2020</td>
      </tr>
    </tbody>
  </table>
  <div
    class="usa-sr-only usa-table__announcement-region"
    aria-live="polite"
  ></div>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>
      Sortable borderless table with various content types
    </caption>
    <thead>
      <tr>
        <th data-sortable scope="col" role="columnheader">Alphabetical</th>
        <th data-sortable scope="col" role="columnheader">Month</th>
        <th data-sortable scope="col" role="columnheader">Percent</th>
        <th data-sortable scope="col" role="columnheader">Count</th>
        <th data-sortable scope="col" role="columnheader">Rank (Ordinal)</th>
        <th data-sortable scope="col" role="columnheader">Rank (Cardinal)</th>
        <th data-sortable scope="col" role="columnheader">Unix Timestamp</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Tango</th>
        <td data-sort-value="3">March</td>
        <td
          data-sort-value="0.206"
          class="font-mono-sm text-tabular text-right"
        >
          20.6%
        </td>
        <td
          data-sort-value="23612"
          class="font-mono-sm text-tabular text-right"
        >
          23,612
        </td>
        <td data-sort-value="3">Third</td>
        <td data-sort-value="3">3rd</td>
        <td data-sort-value="1332884673452">March 27, 2012</td>
      </tr>
      <tr>
        <th scope="row">Foxtrot</th>
        <td data-sort-value="4">April</td>
        <td
          data-sort-value="0.026"
          class="font-mono-sm text-tabular text-right"
        >
          2.6%
        </td>
        <td data-sort-value="-32" class="font-mono-sm text-tabular text-right">
          -32
        </td>
        <td data-sort-value="1">First</td>
        <td data-sort-value="1">1st</td>
        <td data-sort-value="1617974313232">April 9, 2021</td>
      </tr>
      <tr>
        <th scope="row">Hilo</th>
        <td data-sort-value="1">January</td>
        <td
          data-sort-value="-0.036"
          class="font-mono-sm text-tabular text-right"
        >
          -3.6%
        </td>
        <td
          data-sort-value="0.002"
          class="font-mono-sm text-tabular text-right"
        >
          0.002
        </td>
        <td data-sort-value="2">Second</td>
        <td>2nd</td>
        <td data-sort-value="1611169964684">January 20, 2021</td>
      </tr>
      <tr>
        <th scope="row">Bravo</th>
        <td data-sort-value="12">December</td>
        <td
          data-sort-value="-3.006"
          class="font-mono-sm text-tabular text-right"
        >
          -300.6%
        </td>
        <td data-sort-value="0" class="font-mono-sm text-tabular text-right">
          0
        </td>
        <td data-sort-value="4">Fourth</td>
        <td data-sort-value="4">4th</td>
        <td data-sort-value="1608114345343">December 16, 2020</td>
      </tr>
    </tbody>
  </table>
  <div
    class="usa-sr-only usa-table__announcement-region"
    aria-live="polite"
  ></div>
</div>

Sticky table headers

Sticky table headers keep tabular data in context by sticking table headers to the top of the page as the user scrolls.

Sticky header 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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
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
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 

<table class="usa-table usa-table--sticky-header">
  <caption>
    Sticky header table
  </caption>
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>
        Statement adopted by the Continental Congress declaring independence
        from the British Empire.
      </td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>
        The first ten amendments of the U.S. Constitution guaranteeing rights
        and freedoms.
      </td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>
        A document written during the Seneca Falls Convention outlining the
        rights that American women should be entitled to as citizens.
      </td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>
        An executive order granting freedom to slaves in designated southern
        states.
      </td>
      <td>1863</td>
    </tr>
  </tbody>
</table>

Guidance

When to use the table component

  • Displaying tabular data. When you need to display tabular information, such as statistical data.
  • Displaying directories. When listing locations or resources that have similarly structured content for many items.

When to consider something else

  • Non-tabular data. Depending on the type of content, consider using other presentation formats, such as definition lists or hierarchical lists.
  • Robust data visualization. If you need to display more complex relationships or data visualizations, consider a bar graph, infographic, or other type of chart.
  • Dashboards and other layouts. Don’t use tables in place of a layout grid. Table content should follow a consistent structure using headers and logical columns and rows.
  • Long-form content. Table cell content should be brief and scannable. If you find yourself drafting multiple bullet points or paragraphs within a single table cell, the content is likely better off under conventional page headers or in an accordion.
  • Groups of items with different structures. Consider a list or cards for content items that don’t follow a consistent pattern.

Usability guidance

  • Keep it simple. Tables are great at displaying data and complex information. Minimal visual styling helps surface this information more easily.
  • Always use a header row. Use plain language and short labels to define the type of information that can be found in each column or row. For more complex table structures, review the WCAG accessibility recommendations for tables.
  • Predictably format columns. Take care not to vary units or formatting within the same column. Instead, normalize values so they can be easily compared. For example, if most of the rows in a table show a count in days, don’t have some rows that count by weeks.
  • Right-align numerical data. Align numbers that represent a sum to the right using the text alignment utilities on the table cells.
  • Use a monospace font for numerical data. For even better readability of dense, numerical data, consider formatting numbers that convey amounts, such as percentages, currency, or tallies, in a monospace font. (There’s no need to apply monospace formatting or alignment to phone numbers, zip codes, dates, or other number content that can’t be totaled.)
  • Attribute table data in a caption. If your table includes information from a specific source or contains frequently updated content, provide the source and/or last updated date. This clarification is especially useful if your table summarizes data from a more extensive source.
  • Consider a small-screen experience. On mobile devices and other small screens, numerical data across many columns can be easier to understand if the table scrolls horizontally. Directory lists are more readable if the rows display in a stacked layout. For tables with more than two columns, make sure you choose either a scrollable or a stacked variant.
  • Minimize the number of columns. It’s easier for users to read down a long list of rows than it is to read across a long list of columns. Eliminate columns when possible, or consider swapping the columns and rows to improve scannability.
  • Enable sort where useful. Add row sorting to individual columns of long tables where the data can be logically ordered either alphabetically or numerically.
  • Don’t use row sorting with merged cells. Sorting won’t work properly if your table contains colspan or rowspan attributes on the cells.
  • Don’t use row sorting with the mobile stacked variants. Sorting won’t work properly with these variants because the column headers at the top of the table don’t appear at narrow widths and are instead moved into the cell content in each row.

Accessibility guidance

Test the table component in your own project.

USWDS tested the table component for accessibility. You should test your implementation, too.

Use table accessibility tests
  • Simple tables can have up to two rows of headers. Each header cell should have scope="col" or scope="row".
  • Complex tables have more than two levels of headers. Each header should have a unique id and each data cell should have a headers attribute with each related header cell’s id listed.
  • Add title and attribution in a caption. When adding a title, attribution, or a last-updated date to a table, include it in the <caption> tag inside of the <table> element.
  • Add an aria-live region to the page when enabling row sorting. An aria-live region immediately following the <table> element automatically announces when the sort state changes for visitors using screen readers, but it must be added to the HTML document before load: <div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
  • Don’t add aria-label attributes to sortable column headers. Enabling row sorting automatically adds aria-label attributes to the sortable column headers and their toggle sort buttons via JavaScript. These labels are updated to reflect each column’s current sort state (ascending, descending, or unsorted) whenever sort changes.
  • Scrollable tables need to be focusable. When you use the .usa-table-container--scrollable variant with a table, you must add the tabindex="0" attribute to the scrollable element. This attribute assures that users navigating with a keyboard are able to select and scroll the table. tabindex="0" enables focus on elements that do not get focus by default. This attribute does not change the tab order. It places the element in the logical navigation flow.

Using the table component

  • Enable row sorting on columns with sortable data. To activate row sorting, add the data-sortable attribute to the table header element (<th>) of any column with sortable data, and insert an element with the aria-live="polite" attribute and the class .usa-table__announcement-region immediately following the table.
  • Set a default sort column and direction. To sort a table’s rows by a specific sortable column on load, add the attribute aria-sort equal to a sort direction, such as “ascending” or “descending,” to that column header as in the following example: <th data-sortable aria-sort="ascending" scope="col">.
  • Provide raw values for cells with formatted number content. If you have formatted your cell content for display (such as using percent, currency, or comma formatting) or if your cell content is non-numeric but should be sorted in a numeric order (such as months, days of the week, or dates), provide a numeric-sortable value in a data-sort-value attribute on each table cell. Examples follow:

    • Numbers with currency or comma formatting:

      <td data-sort-value="132773.54"> $132,773.54 </td>

    • Percentages or fractions, converted to decimal:

      <td data-sort-value="0.943"> 94.3% </td>

    • Months, weekdays, or other orderable text:

      <td data-sort-value="2"> February </td>

    • Dates, in Unix timestamp:

      <td data-sort-value="327092400"> Aug. 21, 1959 </td>

    • File sizes, in bytes:

      <td data-sort-value="1126501"> 1.1MB </td>

Table settings

Variable Description
$theme-table-background-color

Defines the table background color. A value of default uses the body background color.
$theme-table-border-color

Defines a border color for table cells. A value of default uses either the default text or reverse text color depending on the site background color.
$theme-table-header-background-color

Defines a background color for header cells.
$theme-table-header-text-color

Defines a text color for header cells. A value of default uses either the default text or reverse text color depending on the header background color.
$theme-table-sorted-background-color

Defines a background color for the cells of the sorted column.
$theme-table-sorted-header-background-color

Defines a background color for the sorted column header.
$theme-table-sorted-icon-color

Defines a fill color for the activated sort button in a sortable column header. A value of default uses either the default text or reverse text color depending on the sorted column header background color.
$theme-table-sorted-stripe-background-color

Defines a background color for the alternating horizontal stripes applied to cells of the sorted column.
$theme-table-sticky-top-offset

Defines the top offset for sticky headers. This setting value must include the CSS unit type, for example 10px or 2rem.
$theme-table-stripe-background-color

Defines a background color for alternating horizontal stripes in the striped table variant.
$theme-table-stripe-text-color

Defines a text color for alternating horizontal stripes in the striped table variant. A value of default uses either the default text or reverse text color depending on the stripe background color.
$theme-table-text-color

Defines a text color for table cells. A value of default uses either the default text or reverse text color depending on the site background color.
$theme-table-unsorted-icon-color

Defines a fill color for the unactivated sort button in a sortable column header.

Table variants

Variant Description

.usa-table--borderless

Removes the outer table borders, retaining only a single bottom border on each row. Best for tables with more text than numbers.

.usa-table--compact

Reduces the row height and vertical spacing to display more table rows within a limited space. Should only be used with dense, numerical data, not text content. Pairs well with scrollable and striped variants, but is not suitable for use with stacked variants.

.usa-table-container--scrollable > .usa-table

Add the usa-table-container--scrollable class to a container around any usa-table to apply a horizontal scrollbar if the columns exceed the available width. Ideal for dense tables with many columns.

.usa-table--stacked

Stacks the table cells on narrow screens. Ideal for tables that contain more text information than numerical data. If you use this variant, you must ensure there is a data-label attribute on each cell of the table that matches the column header.

.usa-table--stacked-header

Stacks the table cells on narrow screens and visually promotes the first cell of every row into a “header” for that group. Preferred for directories and other lists where the first cell of every row is a name. If you use this variant, you must ensure there is a data-label attribute on each cell of the table that matches the column header.

.usa-table--sticky-header

Allows the table header element to stick to the top of the page as the user scrolls. Preferred for long tables with many rows. This variant is not compatible with the scrollable and stacked table variants.

.usa-table--striped

Applies alternating horizontal striping to help the eye track across table rows. Pairs well with the scrollable variant for tables with many columns.

Package

  • Package usage: @forward "usa-table";
  • Dependencies: uswds-fonts

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2024-12-18 3.11.0
  • Styles
 No

Updated table header styles to be consistent across all table elements. Now, all thead th, tbody th, and tfoot th cells will have the same visual styles. Teams should confirm that their tables display as expected. More information: uswds#5986

2024-03-20 N/A
  • Guidance
 No

Added WCAG compliance tag and accessibility test status section. More information: uswds-site#2538

2024-03-11 3.8.0
  • Styles
  • Settings
 No

Created the .usa-table--sticky-header variant to allow sticky positioning on table headers. Also added the $theme-table-sticky-top-offset setting, which controls the top position of sticky headers. More information: uswds#5420

2024-03-11 3.8.0
  • Styles
  • Settings
 No

Added the $theme-table-background-color setting. Use this setting to declare the table background color at a theme level. More information: uswds#5420

2024-03-11 3.8.0
  • Content
 No

Simplified the structure of the scrollable table component example. Empty headers in the complex table example were causing accessibility issues. More information: uswds#5783

2023-09-29 3.6.1
  • Accessibility
  • Styles
 No

Fixed a bug that prevented VoiceOver from reading stacked table content while using Safari. More information: uswds#5477

2023-07-17 N/A
  • Guidance
 No

Restored standard and striped table component previews to guidance page. More information: uswds-site#2143

2023-06-09 3.5.0
  • JavaScript
 No

Fixed a typo in the sortable table JavaScript that caused the aria-label in table headers to have an unnecessary single quote. More information: uswds#5280

2022-06-17 3.0.2
  • Styles
 No

Updated table border settings to work as expected. Theme table settings are now consistently applied to table styles. More information: uswds#4712

2022-04-28 3.0.0
  • Assets
  • JavaScript
  • Styles
 Breaking

Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656

2021-05-19 N/A
  • Guidance
 No

Added guidance for making scrollable tables more accessible with tabindex. More information: uswds-site#1227

2021-03-17 N/A
  • Guidance
 No

Added guidance for sortable tables. More information: uswds-site#1180

2021-03-17 2.11.0
  • Guidance
  • JavaScript
  • Markup
  • Styles
 No

Released sortable table. A sorted column changes the row ordering based on alphabetical or numeric cell values. More information: uswds#3950

2021-03-17 2.11.0
  • Styles
 No

Updated default values for table settings. Changed values of $theme-table-border-color, $theme-table-header-text-color, $theme-table-stripe-text-color, and $theme-table-text-color from default to ink. More information: uswds#3950

2021-03-17 2.11.0
  • Styles
 No

Added new table settings. Added $theme-table-sorted-header-background-color, $theme-table-sorted-background-color, $theme-table-sorted-stripe-background-color, and $theme-table-sorted-icon-color, and $theme-table-unsorted-icon-color . More information: uswds#3950