Table • Natura11y

There is a newer version of Naturally.

Gray rock formations

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.

Famous Landmarks
NameCountryCoordinates
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″W
Fingal's CaveScotland56°26'02″N 6°20'10″W
Garni GorgeArmenia40°11'N 44°31'E
Cape RaoulTasmania43°12'04″S 147°45'48″E
SvartifossIceland64.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>    
    
Figure 1
Line #Details
1

The parent .table selector is required.

3-5

The caption tag is recommended for accessibility. With the 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.

Famous Landmarks
NameCountryCoordinates
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″W
Fingal's CaveScotland56°26'02″N 6°20'10″W
Garni GorgeArmenia40°11'N 44°31'E
Cape RaoulTasmania43°12'04″S 147°45'48″E
SvartifossIceland64.023°N 16.975°W

        <table class="table table--edge">
            ...
        </table>    
    
Figure 2

Striped Rows

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

Famous Landmarks
NameCountryCoordinates
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″W
Fingal's CaveScotland56°26'02″N 6°20'10″W
Garni GorgeArmenia40°11'N 44°31'E
Cape RaoulTasmania43°12'04″S 147°45'48″E
SvartifossIceland64.023°N 16.975°W

        <table class="table table--striped">
            ...
        </table>    
    
Figure 3

Table Divider

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

Famous Landmarks
NameCountryCoordinates
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″W
Fingal's CaveScotland56°26'02″N 6°20'10″W
Garni GorgeArmenia40°11'N 44°31'E
Cape RaoulTasmania43°12'04″S 147°45'48″E
SvartifossIceland64.023°N 16.975°W

        <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
Famous Landmarks
NameCountryCoordinates
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″W
Fingal's CaveScotland56°26'02″N 6°20'10″W
Garni GorgeArmenia40°11'N 44°31'E
Cape RaoulTasmania43°12'04″S 147°45'48″E
SvartifossIceland64.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>   
    
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 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.

Famous Landmarks
NameCountryCoordinates
Giant's CausewayNorthern Ireland55°14'27″N 6°30'42″W
Fingal's CaveScotland56°26'02″N 6°20'10″W
Garni GorgeArmenia40°11'N 44°31'E
Cape RaoulTasmania43°12'04″S 147°45'48″E
SvartifossIceland64.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>
    
Figure 6