Photo by Jonathan Larson
Table
Introduction
Natura11y provides an assortment of style options for data tables. Including two different approaches for presenting tables on smaller viewports.
Basic Table
All that is needed for a basic table is the .table selector present on the <table> tag.
| Name | Country | Coordinates |
|---|---|---|
| Giant's Causeway | Northern Ireland | 55°14'27″N 6°30'42″W |
| Fingal's Cave | Scotland | 56°26'02″N 6°20'10″W |
| Garni Gorge | Armenia | 40°11'N 44°31'E |
| Cape Raoul | Tasmania | 43°12'04″S 147°45'48″E |
| Svartifoss | Iceland | 64.023°N 16.975°W |
<table class="table">
<caption class="screen-reader-only">
Places with columnar jointed volcanics
</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Country</th>
<th scope="col" class="text-align-right">Map View</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giant’s Causeway</td>
<td>Northern Ireland</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Fingal's Cave</td>
<td>Scotland</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Garni Gorge</td>
<td>Armenia</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Cape Raoul</td>
<td>Tasmania</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Svartifoss</td>
<td>Iceland</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
</tbody>
</table>
Edge to Edge
For an edge to edge look, include the .table--edge modifier class. This removes the left padding of the first row, and the right padding of the last row.
| Name | Country | Coordinates |
|---|---|---|
| Giant's Causeway | Northern Ireland | 55°14'27″N 6°30'42″W |
| Fingal's Cave | Scotland | 56°26'02″N 6°20'10″W |
| Garni Gorge | Armenia | 40°11'N 44°31'E |
| Cape Raoul | Tasmania | 43°12'04″S 147°45'48″E |
| Svartifoss | Iceland | 64.023°N 16.975°W |
<table class="table table--edge">
...
</table>
Striped Rows
For striped rows within <tbody>, include the .table--striped modifier class.
| Name | Country | Coordinates |
|---|---|---|
| Giant's Causeway | Northern Ireland | 55°14'27″N 6°30'42″W |
| Fingal's Cave | Scotland | 56°26'02″N 6°20'10″W |
| Garni Gorge | Armenia | 40°11'N 44°31'E |
| Cape Raoul | Tasmania | 43°12'04″S 147°45'48″E |
| Svartifoss | Iceland | 64.023°N 16.975°W |
<table class="table table--striped">
...
</table>
Table Divider
Need horizontal and vertical borders? Include the .table--divider modifier class.
| Name | Country | Coordinates |
|---|---|---|
| Giant's Causeway | Northern Ireland | 55°14'27″N 6°30'42″W |
| Fingal's Cave | Scotland | 56°26'02″N 6°20'10″W |
| Garni Gorge | Armenia | 40°11'N 44°31'E |
| Cape Raoul | Tasmania | 43°12'04″S 147°45'48″E |
| Svartifoss | Iceland | 64.023°N 16.975°W |
<table class="table table--divider">
...
</table>
Scrolling Tables
For smaller viewports, nest tables inside the .table-scroll component. This allows tables to scroll horizontally when the table is wider than the viewport.
| Name | Country | Coordinates |
|---|---|---|
| Giant's Causeway | Northern Ireland | 55°14'27″N 6°30'42″W |
| Fingal's Cave | Scotland | 56°26'02″N 6°20'10″W |
| Garni Gorge | Armenia | 40°11'N 44°31'E |
| Cape Raoul | Tasmania | 43°12'04″S 147°45'48″E |
| Svartifoss | Iceland | 64.023°N 16.975°W |
Consider the above table. When the viewport is smaller than assigned minimum width (800px), horizontal scrolling is activated. The assigned minimum is set with this CSS variable: --table-scroll-min-width: 800px;. This value gives you full control of when the scrolling should occur.
<div class="table-scroll">
<small class="table-scroll__help">
Scroll to see whole table
</small>
<div class="table-scroll__container">
<table class="table">
<caption>
Places with columnar jointed volcanics
</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Country</th>
<th scope="col">Coordinates</th>
<th class="text-align-right" scope="col">
Map View
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giant's Causeway</td>
<td>Northern Ireland</td>
<td>55°14'27″N 6°30'42″W
</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Fingal's Cave</td>
<td>Scotland</td>
<td>56°26'02″N 6°20'10″W</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Garni Gorge</td>
<td>Armenia</td>
<td>40°11'N 44°31'E</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Cape Raoul</td>
<td>Tasmania</td>
<td>43°12'04″S 147°45'48″E</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Svartifoss</td>
<td>Iceland</td>
<td>64.023°N 16.975°W</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Stacking Columns
Another way to display tables for smaller viewports is to stack columns on top of one another. Stacking occurs only until the viewport reaches a specified breakpoint. At this point, the table returns to its original horizontal layout.
For stacking columns, include the .table--stack--{x} modifier to the .table selector (Figure 6, line 1). Here, x equals the breakpoint (e.g. lg for the large). To see this in action, resize the browser window to a smaller viewport.
| Name | Country | Coordinates |
|---|---|---|
| Giant's Causeway | Northern Ireland | 55°14'27″N 6°30'42″W |
| Fingal's Cave | Scotland | 56°26'02″N 6°20'10″W |
| Garni Gorge | Armenia | 40°11'N 44°31'E |
| Cape Raoul | Tasmania | 43°12'04″S 147°45'48″E |
| Svartifoss | Iceland | 64.023°N 16.975°W |
<table class="table table--stack--lg">
<caption>
Places with columnar jointed volcanics
</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Country</th>
<th scope="col">Coordinates</th>
<th class="text-align-right" scope="col">
Map View
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Giant's Causeway</td>
<td>Northern Ireland</td>
<td>55°14'27″N 6°30'42″W
</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Fingal's Cave</td>
<td>Scotland</td>
<td>56°26'02″N 6°20'10″W</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Garni Gorge</td>
<td>Armenia</td>
<td>40°11'N 44°31'E</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Cape Raoul</td>
<td>Tasmania</td>
<td>43°12'04″S 147°45'48″E</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
<tr>
<td>Svartifoss</td>
<td>Iceland</td>
<td>64.023°N 16.975°W</td>
<td class="text-align-right">
<a href="#1">Map View</a>
</td>
</tr>
</tbody>
</table>