Bootstrap 5 Table Anatomy

Last Updated : 24 Nov, 2022

Bootstrap 5 Table Anatomy contains three parts of table-head, table-foot & captions, you may think about where is the body as I did in tables but there are no classes for that. We can decorate the body part by using different classes like background color classes or text color classes.

Bootstrap 5 Table Anatomy:

Table head: Table head .table- class is used to set the thead elements’ background color.
Table foot: Table foot does not require any class to set the table foot, but we can change its background color .
Captions: Caption class is used to set the position of the caption on the top-left corner of the table.

Below example illustrates the Bootstrap 5 Table Anatomy:

Example 1: In this example, we will have a table that will have a black background header with a table footer and a caption.

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 Anatomy</strong> 
    </center> 
    <table class="table caption-top"> 
        <caption>Front-end Courses</caption> 
        <thead class="table-dark"> 
            <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> 
            <tr> 
                <th scope="row"></th> 
                <td>Front-End Bundle</td> 
                <td>$89</td> 
            </tr> 
        </tfoot> 
    </table> 
</body> 
  
</html>

Output:

Example 2: In this example, we will have a table that will have a light background header with a table footer and a caption.

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 Anatomy</strong> 
    </center> 
    <table class="table caption-top"> 
        <caption>Front-end Courses</caption> 
        <thead class="table-light"> 
            <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> 
            <tr> 
                <th scope="row"></th> 
                <td>Front-End Bundle</td> 
                <td>$89</td> 
            </tr> 
        </tfoot> 
    </table> 
</body> 
  
</html>