Bootstrap 5 Table borders

Last Updated : 24 Nov, 2022

Bootstrap 5 Table borders classes are used to set or unset the border of the table. With bootstrap 5 table borders are easy to customize with border or no border.

Bordered tables: This is used to set the border on each side of the table.
Tables without borders: This is used to make the table borderless all over the table like there will be no row and column divider.

Syntax:

<table class="table *">
 ...
</table>

Here * can be table-bordered or table-borderless.

Example 1: In this example, we will create bordered table.

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 Borders</strong> 
    </center> 
    <table class="table table-bordered"> 
        <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> 
    </table> 
</body> 
  
</html>

Output:

Bootstrap 5 Table borders

Example 2: In this example, we will use a borderless table.

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 Borders</strong> 
    </center> 
    <table class="table table-borderless"> 
        <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> 
    </table> 
</body> 
  
</html>