Bootstrap 5 Table borders
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> 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> 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> |
Output:
Bootstrap 5 Table borders
Reference: https://getbootstrap.com/docs/5.0/content/tables/#table-borders
Please Login to comment...