Bootstrap 5 Table foot

Bootstrap 5 Table foot is used to create a section where we can calculate the whole column's sum. Like if we create a table that contains two columns one holding the product and another holding the value then the value part can be summed up.

Bootstrap 5 Table foot Class: We do not require any class for the table foot, in HTML we already have HTML tfoot Tag, which plays the role here.

Syntax:

<table>
    <thead>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    ...
    </tfoot>
</table>

The below example illustrates the Bootstrap 5 Table foot:

Example 1: In this example, we will create a course table and sum the price of the course.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Tables Foot</strong>
    </center>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">Course</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>HTML- Basics</td>
                <td>$29</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>CSS- Basics</td>
                <td>$25</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">Combo</th>
                <td>Web-Development Bundle</td>
                <td>$54</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

Output:

Example 2: In this example, we will use the footer with the dark theme using class .table-dark to calculate the sum of the price of all courses

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" 
         integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
</head>

<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Tables Foot</strong>
    </center>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">Course</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>HTML- Basics</td>
                <td>$29</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>CSS- Basics</td>
                <td>$25</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>JS- Basics</td>
                <td>$35</td>
            </tr>
        </tbody>
        <tfoot class="table-dark">
            <tr>
                <th scope="row">Combo</th>
                <td>Front-End Developer</td>
                <td>$89</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/content/tables/#table-foot

Explore