Tables present tabular data grouped into rows, with optional caption, header and footer

Table Caption
Name Age Sex Location
Dave Rave 29 Male Townsville
Fenella Wibblet 31 Female Ladytown
Dwayne Johnson 41 Male Bogtown
Fred Bloggs 66 Male San Andreas
Andy Wibbles-Fordson 37 Male Somewhere
Name Age Sex Location

Sass Configuration:

Name Type Default Description
$table-caption-color Color $root-color Define color of table contents
$table-row-striping Boolean true Use "zebra-striping" on tables
$table-row-striping-bg #f9f9f9 Color Set the color of even rows when striping active
$table-row-hover true Boolean Change bg color of rows when hovered
$table-row-hover-bg palette(info, light) Color Sets the bg color of rows when hovered
$table-row-striping-bg #f9f9f9 Color Set teh color of even rows when striping active

Example Code:

<!-- Tables: -->
<table>
<caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dave Rave</td>
            <td>29</td>
            <td>Male</td>
            <td>Townsville</td>
        </tr>
        <tr>
            <td>Fenella Wibblet</td>
            <td>31</td>
            <td>Female</td>
            <td>Ladytown</td>
        </tr>
        <tr>
            <td>Dwayne Johnson</td>
            <td>41</td>
            <td>Male</td>
            <td>Bogtown</td>
        </tr>
    </tbody>
    <tfoot>
        <tf>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Location</th>
        </tf>
    </tfoot>
</table>