Components

Table

A table shows information in columns and rows.

Tables help logically organize information and group like things together, and they make it easier to understand complex content. 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 easier to digest or 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, rather than scan or read an entire paragraph of text.

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
Borderless 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--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>

<table class="usa-table usa-table--borderless usa-table--striped">
  <caption>Borderless 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>

Scrollable table

A scrollable table is ideal for dense, tabular data.

Scrollable table
Federal Budget
Baseline Projections
2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

Scrollable table with horizontal stripes
Federal Budget
Baseline Projections
2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

Compact scrollable table
Federal Budget
Baseline Projections
2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

Compact scrollable table with horizontal stripes
Federal Budget
Baseline Projections
2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

<div class="usa-table-container--scrollable">
  <table class="usa-table">
    <caption>Scrollable table</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>


<div class="usa-table-container--scrollable">
  <table class="usa-table usa-table--striped">
    <caption>Scrollable table with horizontal stripes</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>

<div class="usa-table-container--scrollable">
  <table class="usa-table usa-table--compact">
    <caption>Compact scrollable table</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>

<div class="usa-table-container--scrollable">
  <table class="usa-table usa-table--compact usa-table--striped">
    <caption>Compact scrollable table with horizontal stripes</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>

Responsive stacked table

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

Stacked bordered 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
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
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
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
<div class="table-example-container">

<div class="width-mobile">
  <table class="usa-table usa-table--stacked">
    <caption>Stacked bordered table <br>(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>
    </tbody>
  </table>
</div>

<div class="width-mobile">
  <table class="usa-table usa-table--borderless usa-table--stacked">
    <caption>Stacked borderless table <br>(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>
    </tbody>
  </table>
</div>

<div class="width-mobile">
  <table class="usa-table usa-table--stacked-header">
    <caption>Stacked bordered table with headers <br>(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>
    </tbody>
  </table>
</div>

<div class="width-mobile">
  <table class="usa-table usa-table--borderless usa-table--stacked-header">
    <caption>Stacked borderless table with headers <br>(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>
    </tbody>
  </table>
</div>

</div>
<style scoped>

.table-example-container {
  display: flex;
  column-gap: 2rem;
  row-gap: 2rem;
  flex-flow: row wrap;
  justify-content: space-around;
}
</style>

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">
  <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">
    <!-- this content will change when sort changes -->
  </div>
  <p class="margin-bottom-3">Data for illustration purposes only.</p>
</div>

<div class="usa-table-container--scrollable">
  <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">
  <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>

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 lists or cards for content items that don’t follow a consistent pattern.

Usability guidance

  • Keep it simple. Tables are great at displaying tabular 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 which 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 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 2 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

  • 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.

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. For 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), then provide a numeric-sortable value in a data-sort-value attribute on each table cell. For example:
    • 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-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-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-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-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-sorted-header-background-color

Defines a background color for the sorted column header

$theme-table-sorted-background-color

Defines a background color for the cells of the sorted column

$theme-table-sorted-stripe-background-color

Defines a background color for the alternating horizontal stripes applied to cells of the sorted column

$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-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--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: @import usa-table
  • Requires: required, global