Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Tables

Tables present data in a structured format for users to scan and compare.

Guidance

Tables display data in a tabular format that is easy for users to scan. We wrap tables in a container so complex data will be horizontally scrollable within the table area without breaking the entire page on mobile screens.

You can use helper classes to modify the alignment of data in your table by placing the following classes on the td or th element:

Guidelines for using tables:

Do

  • Use the <th> element to create table headers. Headers should be used to label columns or rows.
  • Use the scope attribute to specify whether a header cell applies to a column or row.
  • For tables with complex information, consider using the <caption> element to provide a description for screen reader users.

Don’t

  • Use a table for layout purposes.
  • Do not use tables to create an editable interface.
  • Do not put form fields inside a table.
  • Use a table if you don’t have tabular data.

Table

Table description that is visually hidden but will be read out loud by screen readers.
Header Header Header
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

HTML

<div class="gnb-table-container">
	
	<caption class="sr-only">Table description that will be read out loud by screen readers.</caption>
	<table class="gnb-table">
		<thead>
			<tr>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>

Table with a minimum width

For some data, you might want to ensure that your table doesn't get squished too much on smaller screens. To control this, you can add an inline style on the <table> to set a minimum width.

Table description that is visually hidden but will be read out loud by screen readers.
Header Header Header
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

HTML

<div class="gnb-table-container">
	<table class="gnb-table" style="min-width: 800px;">
	<caption class="sr-only">Table description that will be read out loud by screen readers.</caption>
	<table class="gnb-table">
		<thead>
			<tr>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>

Table with a column that has a minimum width

You can also use an inline style on a <td> to control the width of a specific column.

Table description that is visually hidden but will be read out loud by screen readers.
Column with a min-width applied Header Header
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

HTML

<div class="gnb-table-container">
	<table class="gnb-table">
	<caption class="sr-only">Table description that will be read out loud by screen readers.</caption>
	<table class="gnb-table">
		<thead>
			<tr>
				<th scope="col" style="min-width: 200px;">Column with a min-width applied</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>

Table with stripes

Header Header Header Header
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell

HTML

<div class="gnb-table-container">
	<table class="gnb-table-striped">
		<thead>
			<tr>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>

Table with borders

Header Header Header Header
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell

HTML

<div class="gnb-table-container">
	<table class="gnb-table-bordered">
		<thead>
			<tr>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>

Table with stripes and borders

Header Header Header Header
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell

HTML

<div class="gnb-table-container">
	<table class="gnb-table-bordered-striped">
		<thead>
			<tr>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
				<th scope="col">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>
</div>