Bootstrap 5 Bordered tables
Bootstrap 5 Bordered tables are used to pt border on tables. The Bootstrap 5 Bordered tables class put borders on all the sides of the table.
Class used:
- table-bordered: This class is used to put the border on all the sides of the table.
Syntax:
<table class="table table-bordered"> ... </table>
Example 1: In this example, we will create a table that will have a border on each side.
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" > w3wiki </ h1 > < strong >Bootstrap 5 Tables Bordered Tables</ 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:
Example 2: In this example, We set the color of the border by using the Bootstrap 5 Border color.
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" > w3wiki </ h1 > < strong >Bootstrap 5 Tables Bordered Tables</ strong > </ center > < table class = "table table-bordered border-primary" > < 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:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#bordered-tables