Skip to main content
Logo USWDS + Tailwind

Table

A table shows information in columns and rows.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
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
Twig 
<table class="border-separate border-spacing-0">
	<caption class="mb-3 text-left font-bold">Bordered table</caption>
	<thead>
		<tr class="*:bg-gray-10 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:px-4 *:py-2">
			<th scope="col">Document title</th>
			<th scope="col">Description</th>
			<th scope="col">Year</th>
		</tr>
	</thead>
	<tbody>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">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 class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>
	</tbody>
</table>

Striped

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
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
Twig 
<table class="border-separate border-spacing-0">
	<caption class="mb-3 text-left font-bold">Bordered table with horizontal stripes</caption>
	<thead>
		<tr class="*:bg-gray-10 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:px-4 *:py-2">
			<th scope="col">Document title</th>
			<th scope="col">Description</th>
			<th scope="col">Year</th>
		</tr>
	</thead>
	<tbody>
		<tr class="*:even:bg-white *:odd:bg-gray-5 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:even:bg-white *:odd:bg-gray-5 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:even:bg-white *:odd:bg-gray-5 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">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 class="*:even:bg-white *:odd:bg-gray-5 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>
	</tbody>
</table>

Borderless

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
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
Twig 
<table class="border-separate border-spacing-0">
	<caption class="mb-3 text-left font-bold">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 class="*:bg-gray-10 *:text-left *:border-b *:border-black *:px-4 *:py-2">
			<th scope="col">Document title</th>
			<th scope="col">Description</th>
			<th scope="col">Year</th>
		</tr>
	</thead>
	<tbody>
		<tr class="*:bg-white *:text-left *:border-y *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border-y *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border-y *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">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 class="*:bg-white *:text-left *:border-y *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>


	</tbody>
</table>

Compact

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
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
Twig 
<table class="border-separate border-spacing-0">
	<caption class="mb-3 text-left font-bold">Bordered table</caption>
	<thead>
		<tr class="*:bg-gray-10 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:px-4 *:py-2">
			<th scope="col">Document title</th>
			<th scope="col">Description</th>
			<th scope="col">Year</th>
		</tr>
	</thead>
	<tbody>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-3 *:py-1">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-3 *:py-1">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-3 *:py-1">
			<th scope="row" class="font-normal">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 class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-3 *:py-1">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>
	</tbody>
</table>

Scrollable

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
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
Twig 
<div class="overflow-y-hidden w-full" tabindex="0">
	<table class="border-separate border-spacing-0">
		<caption class="mb-3 text-left font-bold">Bordered table</caption>
		<thead>
			<tr class="*:bg-gray-10 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:px-4 *:py-2">
				<th scope="col">Document title</th>
				<th scope="col">Description</th>
				<th scope="col">Year</th>
			</tr>
		</thead>
		<tbody>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal">Declaration of Independence</th>
				<td class="whitespace-nowrap">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
				<td class="whitespace-nowrap">1776</td>
			</tr>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal">Bill of Rights</th>
				<td class="whitespace-nowrap">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
				<td class="whitespace-nowrap">1791</td>
			</tr>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal">Declaration of Sentiments</th>
				<td class="whitespace-nowrap">A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
				<td class="whitespace-nowrap">1848</td>
			</tr>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal">Emancipation Proclamation</th>
				<td class="whitespace-nowrap">An executive order granting freedom to slaves in designated southern states.</td>
				<td class="whitespace-nowrap">1863</td>
			</tr>
		</tbody>
	</table>
</div>
Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Sticky header table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Twig 
<table class="border-separate table-auto w-full border-spacing-0">
	<caption class="mb-3 text-left font-bold">Sticky header table</caption>
	<thead class="sticky top-0">
		<tr class="*:bg-gray-10 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:px-4 *:py-2">
			<th scope="col">Document title</th>
			<th scope="col">Description</th>
			<th scope="col">Year</th>
		</tr>
	</thead>
	<tbody>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">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 class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">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 class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Declaration of Independence</th>
			<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
			<td>1776</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Bill of Rights</th>
			<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
			<td>1791</td>
		</tr>
		<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">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 class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
			<th scope="row" class="font-normal">Emancipation Proclamation</th>
			<td>An executive order granting freedom to slaves in designated southern states.</td>
			<td>1863</td>
		</tr>
	</tbody>
</table>

Sticky Column

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
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
Twig 
<div class="overflow-y-hidden w-full" tabindex="0">
	<table class="border-separate border-spacing-0">
		<caption class="mb-3 text-left font-bold">Bordered table</caption>
		<thead>
			<tr class="*:bg-gray-10 *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:px-4 *:py-2">
				<th scope="col" class="sticky left-0">Document title</th>
				<th scope="col">Description</th>
				<th scope="col">Year</th>
			</tr>
		</thead>
		<tbody>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal sticky left-0">Declaration of Independence</th>
				<td class="whitespace-nowrap">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
				<td class="whitespace-nowrap">1776</td>
			</tr>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal sticky left-0">Bill of Rights</th>
				<td class="whitespace-nowrap">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
				<td class="whitespace-nowrap">1791</td>
			</tr>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal sticky left-0">Declaration of Sentiments</th>
				<td class="whitespace-nowrap">A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
				<td class="whitespace-nowrap">1848</td>
			</tr>
			<tr class="*:bg-white *:text-left *:border [&:not(:first-child)]:*:border-l-0 *:border-black *:border-t-0 *:px-4 *:py-2">
				<th scope="row" class="font-normal sticky left-0">Emancipation Proclamation</th>
				<td class="whitespace-nowrap">An executive order granting freedom to slaves in designated southern states.</td>
				<td class="whitespace-nowrap">1863</td>
			</tr>
		</tbody>
	</table>
</div>