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, as explained on plainlanguage.gov. They’re especially useful for showing long lists of sequential or structured content. Users read tables one row or column at a time, making it easy to digest and compare information.
Tables also help users find specific information within a large data set. For example, if someone is looking for how much their tax is based on their income for a particular year, it’s much easier to find the intersection of that year and income range than to scan or read an entire paragraph of text.
Standard table
| Document title | Description | Year |
|---|---|---|
| Declaration of Independence | Statement adopted by the Continental Congress declaring independence from the British Empire. | 1776 |
| Bill of Rights | The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. | 1791 |
| Declaration of Sentiments | A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. | 1848 |
| Emancipation Proclamation | An executive order granting freedom to slaves in designated southern states. | 1863 |
<table class="usa-table">
<caption>
Bordered table
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td>1791</td>
</tr>
<tr>
<th scope="row">Declaration of Sentiments</th>
<td>
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td>1848</td>
</tr>
<tr>
<th scope="row">Emancipation Proclamation</th>
<td>
An executive order granting freedom to slaves in designated southern
states.
</td>
<td>1863</td>
</tr>
</tbody>
</table>Striped table
A striped table can improve readability by visually grouping row content with alternating background colors.
| Document title | Description | Year |
|---|---|---|
| Declaration of Independence | Statement adopted by the Continental Congress declaring independence from the British Empire. | 1776 |
| Bill of Rights | The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. | 1791 |
| Declaration of Sentiments | A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. | 1848 |
| Emancipation Proclamation | An executive order granting freedom to slaves in designated southern states. | 1863 |
<table class="usa-table usa-table--striped">
<caption>
Bordered table with horizontal stripes
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td>1791</td>
</tr>
<tr>
<th scope="row">Declaration of Sentiments</th>
<td>
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td>1848</td>
</tr>
<tr>
<th scope="row">Emancipation Proclamation</th>
<td>
An executive order granting freedom to slaves in designated southern
states.
</td>
<td>1863</td>
</tr>
</tbody>
</table>Borderless table
A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.
| Document title | Description | Year |
|---|---|---|
| Declaration of Independence | Statement adopted by the Continental Congress declaring independence from the British Empire. | 1776 |
| Bill of Rights | The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. | 1791 |
| Declaration of Sentiments | A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. | 1848 |
| Emancipation Proclamation | An executive order granting freedom to slaves in designated southern states. | 1863 |
<table class="usa-table usa-table--borderless">
<caption>
Borderless table: A borderless table can be useful when you want the
information to feel more a part of the text it accompanies and extends.
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td>1791</td>
</tr>
<tr>
<th scope="row">Declaration of Sentiments</th>
<td>
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td>1848</td>
</tr>
<tr>
<th scope="row">Emancipation Proclamation</th>
<td>
An executive order granting freedom to slaves in designated southern
states.
</td>
<td>1863</td>
</tr>
</tbody>
</table>Scrollable table
A scrollable table is ideal for dense data.
| 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.
| 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.
| 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.
| 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" tabindex="0">
<table class="usa-table">
<caption>
Scrollable table
</caption>
<colgroup>
<col />
</colgroup>
<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" tabindex="0">
<table class="usa-table usa-table--striped">
<caption>
Scrollable table with horizontal stripes
</caption>
<colgroup>
<col />
</colgroup>
<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" tabindex="0">
<table class="usa-table usa-table--compact">
<caption>
Compact scrollable table
</caption>
<colgroup>
<col />
</colgroup>
<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" tabindex="0">
<table class="usa-table usa-table--compact usa-table--striped">
<caption>
Compact scrollable table with horizontal stripes
</caption>
<colgroup>
<col />
</colgroup>
<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.
| 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 |
| 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 |
| 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 |
| Document title | Description | Year |
|---|---|---|
| Declaration of Independence | Statement adopted by the Continental Congress declaring independence from the British Empire. | 1776 |
| Bill of Rights | The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. | 1791 |
| Declaration of Sentiments | A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. | 1848 |
| Emancipation Proclamation | An executive order granting freedom to slaves in designated southern states. | 1863 |
<div class="table-example-container">
<div class="width-mobile">
<table class="usa-table usa-table--stacked">
<caption>
Bordered table
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th data-label="Document title" scope="row">
Declaration of Independence
</th>
<td data-label="Description">
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td data-label="Year">1776</td>
</tr>
<tr>
<th data-label="Document title" scope="row">Bill of Rights</th>
<td data-label="Description">
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td data-label="Year">1791</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Declaration of Sentiments
</th>
<td data-label="Description">
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td data-label="Year">1848</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Emancipation Proclamation
</th>
<td data-label="Description">
An executive order granting freedom to slaves in designated southern
states.
</td>
<td data-label="Year">1863</td>
</tr>
</tbody>
</table>
</div>
<div class="width-mobile">
<table class="usa-table usa-table--stacked usa-table--borderless">
<caption>
Stacked borderless table (when on a
<span class="text-no-wrap">mobile-width</span>
screen)
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th data-label="Document title" scope="row">
Declaration of Independence
</th>
<td data-label="Description">
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td data-label="Year">1776</td>
</tr>
<tr>
<th data-label="Document title" scope="row">Bill of Rights</th>
<td data-label="Description">
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td data-label="Year">1791</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Declaration of Sentiments
</th>
<td data-label="Description">
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td data-label="Year">1848</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Emancipation Proclamation
</th>
<td data-label="Description">
An executive order granting freedom to slaves in designated southern
states.
</td>
<td data-label="Year">1863</td>
</tr>
</tbody>
</table>
</div>
<div class="width-mobile">
<table class="usa-table usa-table--stacked-header">
<caption>
Stacked bordered table with headers (when on a mobile-width screen)
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th data-label="Document title" scope="row">
Declaration of Independence
</th>
<td data-label="Description">
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td data-label="Year">1776</td>
</tr>
<tr>
<th data-label="Document title" scope="row">Bill of Rights</th>
<td data-label="Description">
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td data-label="Year">1791</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Declaration of Sentiments
</th>
<td data-label="Description">
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td data-label="Year">1848</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Emancipation Proclamation
</th>
<td data-label="Description">
An executive order granting freedom to slaves in designated southern
states.
</td>
<td data-label="Year">1863</td>
</tr>
</tbody>
</table>
</div>
<div class="width-mobile">
<table class="usa-table usa-table--stacked-header usa-table--borderless">
<caption>
Stacked borderless table with headers (when on a mobile-width screen)
</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th data-label="Document title" scope="row">
Declaration of Independence
</th>
<td data-label="Description">
Statement adopted by the Continental Congress declaring independence
from the British Empire.
</td>
<td data-label="Year">1776</td>
</tr>
<tr>
<th data-label="Document title" scope="row">Bill of Rights</th>
<td data-label="Description">
The first ten amendments of the U.S. Constitution guaranteeing rights
and freedoms.
</td>
<td data-label="Year">1791</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Declaration of Sentiments
</th>
<td data-label="Description">
A document written during the Seneca Falls Convention outlining the
rights that American women should be entitled to as citizens.
</td>
<td data-label="Year">1848</td>
</tr>
<tr>
<th data-label="Document title" scope="row">
Emancipation Proclamation
</th>
<td data-label="Description">
An executive order granting freedom to slaves in designated southern
states.
</td>
<td data-label="Year">1863</td>
</tr>
</tbody>
</table>
</div>
</div>Sortable table rows
A sorted column changes the row ordering based on alphabetical or numeric cell values.
| 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.
| 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 |
| Alphabetical | Month | Percent | Count | Rank (Ordinal) | Rank (Cardinal) | Unix Timestamp |
|---|---|---|---|---|---|---|
| Tango | March | 20.6% | 23,612 | Third | 3rd | March 27, 2012 |
| Foxtrot | April | 2.6% | -32 | First | 1st | April 9, 2021 |
| Hilo | January | -3.6% | 0.002 | Second | 2nd | January 20, 2021 |
| Bravo | December | -300.6% | 0 | Fourth | 4th | December 16, 2020 |
<div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table">
<caption>
Recently admitted US states (sortable table example)
</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">Name</th>
<th
data-sortable
scope="col"
role="columnheader"
aria-sort="descending"
>
Order admitted to union
</th>
<th data-sortable scope="col" role="columnheader">
Date of ratification vote
</th>
<th data-sortable scope="col" role="columnheader">
Date admitted to union
</th>
<th data-sortable scope="col" role="columnheader">
Percent of voters in favor of ratification
</th>
<th data-sortable scope="col" role="columnheader">
Votes cast in favor of ratification
</th>
<th data-sortable scope="col" role="columnheader">
Estimated population at time of admission
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" role="rowheader">Hawaii</th>
<td data-sort-value="50">50th</td>
<td data-sort-value="331844400">Jun. 27, 1959</td>
<td data-sort-value="327092400">Aug. 21, 1959</td>
<td
data-sort-value="0.943"
class="font-mono-sm text-tabular text-right"
>
94.3%
</td>
<td
data-sort-value="132773"
class="font-mono-sm text-tabular text-right"
>
132,773
</td>
<td
data-sort-value="632772"
class="font-mono-sm text-tabular text-right"
>
632,772
</td>
</tr>
<tr>
<th scope="row" role="rowheader">Alaska</th>
<td data-sort-value="49">49th</td>
<td data-sort-value="431978400">Apr. 24, 1956</td>
<td data-sort-value="346960800">Jan. 3, 1959</td>
<td
data-sort-value="0.681"
class="font-mono-sm text-tabular text-right"
>
68.1%
</td>
<td
data-sort-value="17477"
class="font-mono-sm text-tabular text-right"
>
17,477
</td>
<td
data-sort-value="226167"
class="font-mono-sm text-tabular text-right"
>
226,167
</td>
</tr>
<tr>
<th scope="row" role="rowheader">Arizona</th>
<td data-sort-value="48">48th</td>
<td data-sort-value="1858528800">Feb. 9, 1911</td>
<td data-sort-value="1826560800">Feb. 14, 1912</td>
<td
data-sort-value="0.787"
class="font-mono-sm text-tabular text-right"
>
78.7%
</td>
<td
data-sort-value="12187"
class="font-mono-sm text-tabular text-right"
>
12,187
</td>
<td
data-sort-value="204354"
class="font-mono-sm text-tabular text-right"
>
204,354
</td>
</tr>
<tr>
<th scope="row" role="rowheader">New Mexico</th>
<td data-sort-value="47">47th</td>
<td data-sort-value="1835287200">Nov. 5, 1911</td>
<td data-sort-value="1829930400">Jan. 6, 1912</td>
<td
data-sort-value="0.703"
class="font-mono-sm text-tabular text-right"
>
70.3%
</td>
<td
data-sort-value="31742"
class="font-mono-sm text-tabular text-right"
>
31,742
</td>
<td
data-sort-value="327301"
class="font-mono-sm text-tabular text-right"
>
327,301
</td>
</tr>
<tr>
<th scope="row" role="rowheader">Oklahoma</th>
<td data-sort-value="46">46th</td>
<td data-sort-value="1965751200">Sep. 17, 1907</td>
<td data-sort-value="1960567200">Nov. 16, 1907</td>
<td
data-sort-value="0.712"
class="font-mono-sm text-tabular text-right"
>
71.2%
</td>
<td
data-sort-value="180333"
class="font-mono-sm text-tabular text-right"
>
180,333
</td>
<td
data-sort-value="1657155"
class="font-mono-sm text-tabular text-right"
>
1,657,155
</td>
</tr>
<tr>
<th scope="row" role="rowheader">Utah</th>
<td data-sort-value="45">45th</td>
<td data-sort-value="2340122400">Nov. 5, 1895</td>
<td data-sort-value="2334938400">Jan. 4, 1896</td>
<td
data-sort-value="0.805"
class="font-mono-sm text-tabular text-right"
>
80.5%
</td>
<td
data-sort-value="31305"
class="font-mono-sm text-tabular text-right"
>
31,305
</td>
<td
data-sort-value="210779"
class="font-mono-sm text-tabular text-right"
>
210,779
</td>
</tr>
</tbody>
</table>
<div
class="usa-sr-only usa-table__announcement-region"
aria-live="polite"
></div>
<p class="margin-bottom-3">Data for illustration purposes only.</p>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table usa-table--striped">
<caption>
Sortable striped table with various content types
</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">Alphabetical</th>
<th data-sortable scope="col" role="columnheader">Month</th>
<th data-sortable scope="col" role="columnheader">Percent</th>
<th data-sortable scope="col" role="columnheader">Count</th>
<th data-sortable scope="col" role="columnheader">Rank (Ordinal)</th>
<th data-sortable scope="col" role="columnheader">Rank (Cardinal)</th>
<th data-sortable scope="col" role="columnheader">Unix Timestamp</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tango</th>
<td data-sort-value="3">March</td>
<td
data-sort-value="0.206"
class="font-mono-sm text-tabular text-right"
>
20.6%
</td>
<td
data-sort-value="23612"
class="font-mono-sm text-tabular text-right"
>
23,612
</td>
<td data-sort-value="3">Third</td>
<td data-sort-value="3">3rd</td>
<td data-sort-value="1332884673452">March 27, 2012</td>
</tr>
<tr>
<th scope="row">Foxtrot</th>
<td data-sort-value="4">April</td>
<td
data-sort-value="0.026"
class="font-mono-sm text-tabular text-right"
>
2.6%
</td>
<td data-sort-value="-32" class="font-mono-sm text-tabular text-right">
-32
</td>
<td data-sort-value="1">First</td>
<td data-sort-value="1">1st</td>
<td data-sort-value="1617974313232">April 9, 2021</td>
</tr>
<tr>
<th scope="row">Hilo</th>
<td data-sort-value="1">January</td>
<td
data-sort-value="-0.036"
class="font-mono-sm text-tabular text-right"
>
-3.6%
</td>
<td
data-sort-value="0.002"
class="font-mono-sm text-tabular text-right"
>
0.002
</td>
<td data-sort-value="2">Second</td>
<td>2nd</td>
<td data-sort-value="1611169964684">January 20, 2021</td>
</tr>
<tr>
<th scope="row">Bravo</th>
<td data-sort-value="12">December</td>
<td
data-sort-value="-3.006"
class="font-mono-sm text-tabular text-right"
>
-300.6%
</td>
<td data-sort-value="0" class="font-mono-sm text-tabular text-right">
0
</td>
<td data-sort-value="4">Fourth</td>
<td data-sort-value="4">4th</td>
<td data-sort-value="1608114345343">December 16, 2020</td>
</tr>
</tbody>
</table>
<div
class="usa-sr-only usa-table__announcement-region"
aria-live="polite"
></div>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table usa-table--borderless">
<caption>
Sortable borderless table with various content types
</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">Alphabetical</th>
<th data-sortable scope="col" role="columnheader">Month</th>
<th data-sortable scope="col" role="columnheader">Percent</th>
<th data-sortable scope="col" role="columnheader">Count</th>
<th data-sortable scope="col" role="columnheader">Rank (Ordinal)</th>
<th data-sortable scope="col" role="columnheader">Rank (Cardinal)</th>
<th data-sortable scope="col" role="columnheader">Unix Timestamp</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tango</th>
<td data-sort-value="3">March</td>
<td
data-sort-value="0.206"
class="font-mono-sm text-tabular text-right"
>
20.6%
</td>
<td
data-sort-value="23612"
class="font-mono-sm text-tabular text-right"
>
23,612
</td>
<td data-sort-value="3">Third</td>
<td data-sort-value="3">3rd</td>
<td data-sort-value="1332884673452">March 27, 2012</td>
</tr>
<tr>
<th scope="row">Foxtrot</th>
<td data-sort-value="4">April</td>
<td
data-sort-value="0.026"
class="font-mono-sm text-tabular text-right"
>
2.6%
</td>
<td data-sort-value="-32" class="font-mono-sm text-tabular text-right">
-32
</td>
<td data-sort-value="1">First</td>
<td data-sort-value="1">1st</td>
<td data-sort-value="1617974313232">April 9, 2021</td>
</tr>
<tr>
<th scope="row">Hilo</th>
<td data-sort-value="1">January</td>
<td
data-sort-value="-0.036"
class="font-mono-sm text-tabular text-right"
>
-3.6%
</td>
<td
data-sort-value="0.002"
class="font-mono-sm text-tabular text-right"
>
0.002
</td>
<td data-sort-value="2">Second</td>
<td>2nd</td>
<td data-sort-value="1611169964684">January 20, 2021</td>
</tr>
<tr>
<th scope="row">Bravo</th>
<td data-sort-value="12">December</td>
<td
data-sort-value="-3.006"
class="font-mono-sm text-tabular text-right"
>
-300.6%
</td>
<td data-sort-value="0" class="font-mono-sm text-tabular text-right">
0
</td>
<td data-sort-value="4">Fourth</td>
<td data-sort-value="4">4th</td>
<td data-sort-value="1608114345343">December 16, 2020</td>
</tr>
</tbody>
</table>
<div
class="usa-sr-only usa-table__announcement-region"
aria-live="polite"
></div>
</div>Guidance
When to use the table component
- Displaying tabular data. When you need to display tabular information, such as statistical data.
- Displaying directories. When listing locations or resources that have similarly structured content for many items.
When to consider something else
- Non-tabular data. Depending on the type of content, consider using other presentation formats, such as definition lists or hierarchical lists.
- Robust data visualization. If you need to display more complex relationships or data visualizations, consider a bar graph, infographic, or other type of chart.
- Dashboards and other layouts. Don’t use tables in place of a layout grid. Table content should follow a consistent structure using headers and logical columns and rows.
- Long-form content. Table cell content should be brief and scannable. If you find yourself drafting multiple bullet points or paragraphs within a single table cell, the content is likely better off under conventional page headers or in an accordion.
- Groups of items with different structures. Consider a list or cards for content items that don’t follow a consistent pattern.
Usability guidance
- Keep it simple. Tables are great at displaying data and complex information. Minimal visual styling helps surface this information more easily.
- Always use a header row. Use plain language and short labels to define the type of information that can be found in each column or row. For more complex table structures, review the WCAG accessibility recommendations for tables.
- Predictably format columns. Take care not to vary units or formatting within the same column. Instead, normalize values so they can be easily compared. For example, if most of the rows in a table show a count in days, don’t have some rows that count by weeks.
- Right-align numerical data. Align numbers that represent a sum to the right using the text alignment utilities on the table cells.
- Use a monospace font for numerical data. For even better readability of dense, numerical data, consider formatting numbers that convey amounts, such as percentages, currency, or tallies, in a monospace font. (There’s no need to apply monospace formatting or alignment to phone numbers, zip codes, dates, or other number content that can’t be totaled.)
- Attribute table data in a caption. If your table includes information from a specific source or contains frequently updated content, provide the source and/or last updated date. This clarification is especially useful if your table summarizes data from a more extensive source.
- Consider a small-screen experience. On mobile devices and other small screens, numerical data across many columns can be easier to understand if the table scrolls horizontally. Directory lists are more readable if the rows display in a stacked layout. For tables with more than two columns, make sure you choose either a scrollable or a stacked variant.
- Minimize the number of columns. It’s easier for users to read down a long list of rows than it is to read across a long list of columns. Eliminate columns when possible, or consider swapping the columns and rows to improve scannability.
- Enable sort where useful. Add row sorting to individual columns of long tables where the data can be logically ordered either alphabetically or numerically.
- Don’t use row sorting with merged cells. Sorting won’t work properly if your table contains
colspanorrowspanattributes 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"orscope="row". - Complex tables have more than two levels of headers. Each header should have a unique
idand each data cell should have aheadersattribute with each related header cell’sidlisted. - 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-liveregion to the page when enabling row sorting. Anaria-liveregion 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-labelattributes to sortable column headers. Enabling row sorting automatically addsaria-labelattributes to the sortable column headers and their toggle sort buttons via JavaScript. These labels are updated to reflect each column’s current sort state (ascending, descending, or unsorted) whenever sort changes. - Scrollable tables need to be focusable. When you use the
.usa-table-container--scrollablevariant with a table, you must add thetabindex="0"attribute to the scrollable element. This attribute assures that users navigating with a keyboard are able to select and scroll the table.tabindex="0"enables focus on elements that do not get focus by default. This attribute does not change the tab order. It places the element in the logical navigation flow.
Using the table component
- Enable row sorting on columns with sortable data. To activate row sorting, add the
data-sortableattribute to the table header element (<th>) of any column with sortable data, and insert an element with thearia-live="polite"attribute and the class.usa-table__announcement-regionimmediately 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-sortequal to a sort direction, such as “ascending” or “descending,” to that column header as in the following example:<th data-sortable aria-sort="ascending" scope="col">. - Provide raw values for cells with formatted number content. If you have formatted your cell content for display (such as using percent, currency, or comma formatting) or if your cell content is non-numeric but should be sorted in a numeric order (such as months, days of the week, or dates), provide a numeric-sortable value in a
data-sort-valueattribute on each table cell. Examples follow:-
Numbers with currency or comma formatting:
<td data-sort-value="132773.54"> $132,773.54 </td> -
Percentages or fractions, converted to decimal:
<td data-sort-value="0.943"> 94.3% </td> -
Months, weekdays, or other orderable text:
<td data-sort-value="2"> February </td> -
Dates, in Unix timestamp:
<td data-sort-value="327092400"> Aug. 21, 1959 </td> -
File sizes, in bytes:
<td data-sort-value="1126501"> 1.1MB </td>
-
Table settings
| Variable | Description |
|---|---|
$theme-table-border-color
|
Defines a border color for table cells. A value of |
$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 |
$theme-table-sorted-background-color
|
Defines a background color for the cells of the sorted column. |
$theme-table-sorted-header-background-color
|
Defines a background color for the sorted column header. |
$theme-table-sorted-icon-color
|
Defines a fill color for the activated sort button in a sortable column header. A value of |
$theme-table-sorted-stripe-background-color
|
Defines a background color for the alternating horizontal stripes applied to cells of the sorted column. |
$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 |
$theme-table-text-color
|
Defines a text color for table cells. A value of |
$theme-table-unsorted-icon-color
|
Defines a fill color for the unactivated sort button in a sortable column header. |
Table variants
| Variant | Description |
|---|---|
|
|
Removes the outer table borders, retaining only a single bottom border on each row. Best for tables with more text than numbers. |
|
|
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. |
|
|
Add the |
|
|
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. |
|
|
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. |
|
|
Applies alternating horizontal striping to help the eye track across table rows. Pairs well with the scrollable variant for tables with many columns. |
Package
-
Package usage:
@forward "usa-table"; - Dependencies:
uswds-fonts
Latest updates
Meaningful code and guidance updates are listed in the following table:
| Date | USWDS version | Affects | Description |
|---|---|---|---|
| 2023-09-29 | 3.6.1 |
|
Fixed a bug that prevented VoiceOver from reading stacked table content while using Safari. More information: uswds#5477 |
| 2023-07-17 | N/A |
|
Restored standard and striped table component previews to guidance page. More information: uswds-site#2143 |
| 2023-06-09 | 3.5.0 |
|
Fixed a typo in the sortable table JavaScript that caused the |
| 2022-06-17 | 3.0.2 |
|
Updated table border settings to work as expected. Theme table settings are now consistently applied to table styles. More information: uswds#4712 |
| 2022-04-28 | 3.0.0 |
|
Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656 |
| 2021-05-19 | N/A |
|
Added guidance for making scrollable tables more accessible with |
| 2021-03-17 | N/A |
|
Added guidance for sortable tables. More information: uswds-site#1180 |
| 2021-03-17 | 2.11.0 |
|
Released sortable table. A sorted column changes the row ordering based on alphabetical or numeric cell values. More information: uswds#3950 |
| 2021-03-17 | 2.11.0 |
|
Updated default values for table settings.
Changed values of |
| 2021-03-17 | 2.11.0 |
|
Added new table settings.
Added |
