Tables

Use tables to show more complex amount of data

Default

Class Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9
<table class="table shadow-soft rounded">
    <tr>
        <th class="border-0" scope="col" id="class">Class</th>
        <th class="border-0" scope="col" id="teacher">Teacher</th>
        <th class="border-0" scope="col" id="males">Males</th>
        <th class="border-0" scope="col" id="females">Females</th>
    </tr>
    <tr>
        <th scope="row" id="firstyear" rowspan="2">First Year</th>
        <th scope="row" id="Bolter" headers="firstyear teacher">D. Bolter</th>
        <td headers="firstyear Bolter males">5</td>
        <td headers="firstyear Bolter females">4</td>
    </tr>
    <tr>
        <th scope="row" id="Cheetham" headers="firstyear teacher">A. Cheetham</th>
        <td headers="firstyear Cheetham males">7</td>
        <td headers="firstyear Cheetham females">9</td>
    </tr>
    <tr>
        <th scope="row" id="secondyear" rowspan="3">Second Year</th>
        <th scope="row" id="Lam" headers="secondyear teacher">M. Lam</th>
        <td headers="secondyear Lam males">3</td>
        <td headers="secondyear Lam females">9</td>
    </tr>
    <tr>
        <th scope="row" id="Crossy" headers="secondyear teacher">S. Crossy</th>
        <td headers="secondyear Crossy males">4</td>
        <td headers="secondyear Crossy females">3</td>
    </tr>
    <tr>
        <th scope="row" id="Forsyth" headers="secondyear teacher">A. Forsyth</th>
        <td headers="secondyear Forsyth males">6</td>
        <td headers="secondyear Forsyth females">9</td>
    </tr>
</table>

Stripes

Use the .table-striped modifier class to make tables striped:

Class Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9
<table class="table table-striped">
    <tr>
        <th class="border-0" scope="col" id="class2">Class</th>
        <th class="border-0" scope="col" id="teacher2">Teacher</th>
        <th class="border-0" scope="col" id="males2">Males</th>
        <th class="border-0" scope="col" id="females2">Females</th>
    </tr>
    <tr>
        <th scope="row" id="firstyear2" rowspan="2">First Year</th>
        <th scope="row" id="Bolter2" headers="firstyear2 teacher2">D. Bolter</th>
        <td headers="firstyear2 Bolter2 males2">5</td>
        <td headers="firstyear2 Bolter2 females2">4</td>
    </tr>
    <tr>
        <th scope="row" id="Cheetham2" headers="firstyear2 teacher2">A. Cheetham</th>
        <td headers="firstyear2 Cheetham2 males2">7</td>
        <td headers="firstyear2 Cheetham2 females2">9</td>
    </tr>
    <tr>
        <th scope="row" id="secondyear2" rowspan="3">Second Year</th>
        <th scope="row" id="Lam2" headers="secondyear2 teacher2">M. Lam</th>
        <td headers="secondyear2 Lam2 males2">3</td>
        <td headers="secondyear2 Lam2 females2">9</td>
    </tr>
    <tr>
        <th scope="row" id="Crossy2" headers="secondyear2 teacher2">S. Crossy</th>
        <td headers="secondyear2 Crossy2 males2">4</td>
        <td headers="secondyear2 Crossy2 females2">3</td>
    </tr>
    <tr>
        <th scope="row" id="Forsyth2" headers="secondyear2 teacher2">A. Forsyth</th>
        <td headers="secondyear2 Forsyth2 males2">6</td>
        <td headers="secondyear2 Forsyth2 females2">9</td>
    </tr>
</table>

Hover Pro

Use the .table-hover modifier class to enable hovering over table rows:

Class Teacher Males Females
First Year D. Bolter 5 4
A. Cheetham 7 9
Second Year M. Lam 3 9
S. Crossy 4 3
A. Forsyth 6 9
<table class="table table-hover shadow-inset rounded">
    <tr>
        <th class="border-0" scope="col" id="class3">Class</th>
        <th class="border-0" scope="col" id="teacher3">Teacher</th>
        <th class="border-0" scope="col" id="males3">Males</th>
        <th class="border-0" scope="col" id="females3">Females</th>
    </tr>
    <tr>
        <th scope="row" id="firstyear3" rowspan="2">First Year</th>
        <th scope="row" id="Bolter3" headers="firstyear3 teacher3">D. Bolter</th>
        <td headers="firstyear3 Bolter3 males3">5</td>
        <td headers="firstyear3 Bolter3 females3">4</td>
    </tr>
    <tr>
        <th scope="row" id="Cheetham3" headers="firstyear3 teacher3">A. Cheetham</th>
        <td headers="firstyear3 Cheetham3 males3">7</td>
        <td headers="firstyear3 Cheetham3 females3">9</td>
    </tr>
    <tr>
        <th scope="row" id="secondyear3" rowspan="3">Second Year</th>
        <th scope="row" id="Lam3" headers="secondyear3 teacher3">M. Lam</th>
        <td headers="secondyear3 Lam3 males3">3</td>
        <td headers="secondyear3 Lam3 females3">9</td>
    </tr>
    <tr>
        <th scope="row" id="Crossy3" headers="secondyear3 teacher3">S. Crossy</th>
        <td headers="secondyear3 Crossy3 males3">4</td>
        <td headers="secondyear3 Crossy3 females3">3</td>
    </tr>
    <tr>
        <th scope="row" id="Forsyth3" headers="secondyear3 teacher3">A. Forsyth</th>
        <td headers="secondyear3 Forsyth3 males3">6</td>
        <td headers="secondyear3 Forsyth3 females3">9</td>
    </tr>
</table>