<!-- End of Hero -->
<div class="section section-md">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="mb-4">
                    <span class="h5">Default table</span>
                </div>
                <div class="mb-5">
                    <table class="table">
                        <tr>
                            <th scope="col" id="class">Class</th>
                            <th scope="col" id="teacher">Teacher</th>
                            <th scope="col" id="males">Males</th>
                            <th 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>
                </div>
                <div class="mb-5">
                    <div class="mb-4">
                        <span class="h5">Dark table</span>
                    </div>
                    <table class="table table-dark">
                        <tr>
                            <th scope="col" id="class1">Year</th>
                            <th scope="col" id="teacher1">Teacher</th>
                            <th scope="col" id="males1">Males</th>
                            <th scope="col" id="females1">Females</th>
                        </tr>
                        <tr>
                            <th scope="row" id="firstyear1" rowspan="2">First Year</th>
                            <th scope="row" id="Bolter1" headers="firstyear1 teacher1">D. Bolter</th>
                            <td headers="firstyear1 Bolter1 males1">5</td>
                            <td headers="firstyear1 Bolter1 females1">4</td>
                        </tr>
                        <tr>
                            <th scope="row" id="Cheetham1" headers="firstyear1 teacher1">A. Cheetham</th>
                            <td headers="firstyear1 Cheetham1 males1">7</td>
                            <td headers="firstyear1 Cheetham1 females1">9</td>
                        </tr>
                        <tr>
                            <th scope="row" id="secondyear1" rowspan="3">Second Year</th>
                            <th scope="row" id="Lam1" headers="secondyear1 teacher1">M. Lam</th>
                            <td headers="secondyear1 Lam1 males1">3</td>
                            <td headers="secondyear1 Lam1 females1">9</td>
                        </tr>
                        <tr>
                            <th scope="row" id="Crossy1" headers="secondyear1 teacher1">S. Crossy</th>
                            <td headers="secondyear1 Crossy1 males1">4</td>
                            <td headers="secondyear1 Crossy1 females1">3</td>
                        </tr>
                        <tr>
                            <th scope="row" id="Forsyth1" headers="secondyear1 teacher1">A. Forsyth</th>
                            <td headers="secondyear1 Forsyth1 males1">6</td>
                            <td headers="secondyear1 Forsyth1 females1">9</td>
                        </tr>
                    </table>
                </div>
                <div class="mb-5">
                    <div class="mb-4">
                        <span class="h5">Hoverable rows</span>
                    </div>
                    <table class="table table-hover">
                        <tr>
                            <th scope="col" id="class3">Class</th>
                            <th scope="col" id="teacher3">Teacher</th>
                            <th scope="col" id="males3">Males</th>
                            <th 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>
                </div>
                <div class="mb-5">
                    <div class="mb-4">
                        <span class="h5">Responsive Table</span>
                    </div>
                    <div class="table-responsive-sm">
                        <table class="table table-striped">
                            <tr>
                                <th scope="col" id="class2">Class</th>
                                <th scope="col" id="teacher2">Teacher</th>
                                <th scope="col" id="males2">Males</th>
                                <th 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>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>