Bootstrap 5 Accented Tables

Last Updated : 21 Dec, 2022

Bootstrap 5 Accented tables are the tables that give a design-specific look and feel and which go beyond the mere basic table functionality of carrying rows and columns. There are three types of accented tables, striped, hoverable, and active, all of which are required in different situations.
On the accented tables we used some techniques to make these effects work for all our table variants.

Bootstrap 5 Accented Tables:

Table Striped Rows: Table Striped rows are used to change the background color of alternate rows in the table row within the <tbody>. The rows look zebra-striped and it helps to differentiate between two rows of a table.
Table Hoverable Rows: Table Hoverable Rows can be used to apply a hover state on table rows within a <tbody>. It helps to focus on the individual row.
Table Active Tables: Active tables are used to make the table row, cell or column highlighted. We just need to put the dedicated class in that particular place.

Syntax:

<table class="table Bootstrap 5 Accented Tables Class">
   ...
</table>

Example 1: In this example, we will learn about the table-hover class and the table-active class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Bootstrap CDN -->
    <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> 
    <div class="container"> 
        <h1 class="text-success"> 
          GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Accented tables</h2> 
     
        <table class="table table-hover"> 
            <thead> 
                <tr> 
                    <th>State</th> 
                    <th>Capital</th>            
                </tr> 
            </thead> 
            <tbody> 
                <tr class="table-active"> 
                    <td>Uttar Pradesh</td> 
                    <td>Lucknow</td>            
                </tr> 
                <tr> 
                    <td>Punjab</td> 
                    <td>Chandigarh</td>            
                </tr> 
                <tr> 
                    <td>Goa</td> 
                    <td>Panaji</td>           
                </tr> 
                <tr> 
                    <td>Himachal Pradesh</td> 
                    <td>Shimla</td>           
                </tr> 
            </tbody> 
        </table>   
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we will learn about the table-striped class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <!-- Bootstrap CDN -->
    <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> 
    <div class="container"> 
        <h1 class="text-success"> 
          GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Accented tables</h2> 
         
        <table class="table table-striped"> 
            <thead> 
              <tr> 
                <th>State</th> 
                <th>Capital</th>                
              </tr> 
            </thead> 
            <tbody> 
              <tr > 
                <td>Uttar Pradesh</td> 
                <td>Lucknow</td>                
              </tr> 
              <tr> 
                <td>Punjab</td> 
                <td>Chandigarh</td>                
              </tr> 
              <tr> 
                <td>Goa</td> 
                <td>Panaji</td>               
              </tr> 
              <tr> 
                <td>Himachal Pradesh</td> 
                <td>Shimla</td>               
              </tr> 
            </tbody> 
        </table>   
    </div> 
</body> 
</html>