University Communications and Marketing
Cole Hall fall Aerial view.

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.

Column 1 Column 2 Column 3 Column 4
Data 1,1 Data 2,1 Data 3,1 Data 4,1
Data 1,2 Data 2,2 Data 3,2 Data 4,2
Data 1,3 Data 2,3 Data 3,3 Data 4,3

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.

Rank Sales (Millions) Album Artist Year
1 47 Thriller Michael Jackson 1982
2 41 Their Greatest Hits 1971-1975 The Eagles 1976
3 32 Hotel California The Eagles 1976
4 29 Come on Over Shania Twain 1997
5 29 Led Zeppelin IV Led Zeppelin 1971

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

Weekday Menu
Monday Meatloaf
Tuesday Chicken Pot Pie
Wednesday Macaroni & Cheese
Thursday Pork Chops
Friday Pizza

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 & Cheese</td>
    </tr>
    <tr>
      <td>Thursday</td>
      <td>Pork Chops</td>
    </tr>
    <tr>
      <td>Friday</td>
      <td>Pizza</td>
    </tr>
  </tbody>
</table>