Skip to contentSkip to footer
Gray rock formations

Photo: Jonathan Larson

Table

Introduction

Natura11y provides style options for data tables, including two different approaches for presenting tables on smaller viewports.

Basic Table

For a basic table, add the .table selector to the <table> tag.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
HTML
<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>
Figure 1
Figure 1 notes
LinesDetails
1

The parent .table selector is required.

3-5

The caption tag is recommended for accessibility. In this example, the caption is present, but visually hidden with the .screen-reader-only utility.

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.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
HTML
<table class="table table--edge">
  ...
</table>
Figure 2

Striped Rows

For striped rows within <tbody>, include the .table--striped modifier class.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
HTML
<table class="table table--striped">
  ...
</table>
Figure 3

Table Divider

Need horizontal and vertical borders? Include the .table--divider modifier class.

Places with columnar jointed volcanics
NameCountryMap View
Giant's CausewayNorthern IrelandMap View
Fingal's CaveScotlandMap View
Garni GorgeArmeniaMap View
Cape RaoulTasmaniaMap View
SvartifossIcelandMap View
HTML
<table class="table table--divider">
  ...
</table>
Figure 4

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.

Scroll to see whole table
Places with columnar jointed volcanics
NameCountryCoordinatesMap View
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″WMap View
Fingal's CaveScotland56°26'02″N 6°20'10″WMap View
Garni GorgeArmenia40°11'N 44°31'EMap View
Cape RaoulTasmania43°12'04″S 147°45'48″EMap View
SvartifossIceland64.023°N 16.975°WMap View

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.

HTML
<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>
Figure 5

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 with the .table selector. Here, x equals the breakpoint (e.g. lg for large). To see this in action, resize the browser window to a smaller viewport.

Places with columnar jointed volcanics
NameCountryCoordinatesMap View
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″WMap View
Fingal's CaveScotland56°26'02″N 6°20'10″WMap View
Garni GorgeArmenia40°11'N 44°31'EMap View
Cape RaoulTasmania43°12'04″S 147°45'48″EMap View
SvartifossIceland64.023°N 16.975°WMap View
HTML
<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>
Figure 6

Typography

Color

Accessibility