Tables

The table tag is intended to hold tabulated data. Unlike a list or a paragraph, data in a table is given additional meaning by its placement within the row/column structure.

Never use a table to control page design layout. If you want to arrange items in rows and columns, see Rows and Columns.

Tables are required to have a thead and tbody, and must use th tags to indicate column and row headers.

Responsive Tables

If your table can be simplified as a series of rows, you can use the class “responsive-table” to have the content re-arrange itself on mobile devices.

Code Sample

<table class="responsive-table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1,1</td>
<td>Data 2,1</td>
<td>Data 3,1</td>
<td>Data 4,1</td>
</tr>
<tr>
<td>Data 1,2</td>
<td>Data 2,2</td>
<td>Data 3,2</td>
<td>Data 4,2</td>
</tr>
<tr>
<td>Data 1,3</td>
<td>Data 2,3</td>
<td>Data 3,3</td>
<td>Data 4,3</td>
</tr>
</tbody>
</table>

Sortable Tables

Using the class sortable you can create a table where the visitor can sort by any of the columns. In the column headings you can use the class name sort-default to choose which column the table will be sorted on after page load. If you don’t set a default, the table will be sorted by the first column.

You can also add the class name desc to reverse the order of the initial sort column.

If you set data-column-type to date the script will attempt to parse the column’s contents as dates. (If the column’s contents aren’t valid dates, it’ll default back to strings.)

You cannot use both the sortable and responsive-table classes at the same time.

You can also use data-column-type=”weekday” to sort by weekday.

Code Samples

<table class="sortable">
	<thead>
		<tr>
			<th class="sort-default">Rank</th>
			<th>Sales (Millions)</th>
			<th>Album</th>
			<th>Artist</th>
			<th data-column-type="date">Year</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>47</td>
			<td>Thriller</td>
			<td>Michael Jackson</td>
			<td>1982</td>
		</tr>
		<tr>
			<td>2</td>
			<td>41</td>
			<td>Their Greatest Hits 1971-1975</td>
			<td>The Eagles</td>
			<td>1976</td>
		</tr>
		<tr>
			<td>3</td>
			<td>32</td>
			<td>Hotel California</td>
			<td>The Eagles</td>
			<td>1976</td>
		</tr>
		<tr>
			<td>4</td>
			<td>29</td>
			<td>Come on Over</td>
			<td>Shania Twain</td>
			<td>1997</td>
		</tr>
		<tr>
			<td>5</td>
			<td>29</td>
			<td>Led Zeppelin IV</td>
			<td>Led Zeppelin</td>
			<td>1971</td>
		</tr>
	</tbody>
</table>

<table class="sortable">
  <thead>
    <tr>
      <th data-column-type="weekday">Weekday</th>
      <th>Menu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>Meatloaf</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>Chicken Pot Pie</td>
    </tr>
    <tr>
      <td>Wednesday</td>
      <td>Macaroni &amp; Cheese</td>
    </tr>
    <tr>
      <td>Thursday</td>
      <td>Pork Chops</td>
    </tr>
    <tr>
      <td>Friday</td>
      <td>Pizza</td>
    </tr>
  </tbody>
</table>