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.

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

<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
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
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 (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="width-mobile">

  <table class="usa-table usa-table--stacked">
    <caption>Stacked bordered table (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>

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





  <table class="usa-table usa-table--borderless usa-table--stacked">
    <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>

  <table class="usa-table usa-table--borderless usa-table--stacked-header">
    <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>

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.

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.

Implementation

Table settings
Variable Description
$theme-table-border-color

Defines a border color for table cells.

$theme-table-text-color

Defines a text color for table cells.

$theme-table-header-background-color

Defines a background color for header cells.

$theme-table-header-text-color

Defines a text color for header cells.

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

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 information

  • Package usage: @import usa-table
  • Requires: required, global