Bootstrap 5 Bordered Table

Bootstrap 5 bordered table has borders on all sides of the table and cells. Add .table, and .table-bordered classes to the <table> to create a bordered table in Bootstrap 5.

General Syntax

      <table class="table table-bordered"></table>
  

Source Code

          <table class="table table-bordered">
<thead>
	<tr>
		<th>Fruits</th>
		<th>Price(/kg)</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Mango</td>
		<td>25$</td>
	</tr>

	<tr>
		<td>Orange</td>
		<td>35$</td>
	</tr>

	<tr>
		<td>Grapes</td>
		<td>45$</td>
	</tr>

</tbody>

</table>
        
Try it now
Source Code:Output
Fruits Price(/kg)
Mango 25$
Orange 35$
Grapes 45$

In the above example, .table class is used to create a simple Bootstrap 5 table. To make it bordered, use .table-bordered class.

Bordered Striped Table

Bootstrap 5 bordered striped table can be created by assigning .table,.table-bordered, and .table-striped classes to the <table>.

General Syntax

      <table class="table table-bordered table-striped"></table>
  

Source Code

          <table class="table table-bordered table-striped">
 <thead>
 	<th>Tutorials</th>
 	<th>Platforms</th>
 </thead>
 <tbody>
 	<tr>
 		<td>Bootstrap 5</td>
 		<td>sudhakarinfotech</td>
 	</tr>

 	<tr>
 		<td>Bootstrap 4</td>
 		<td>sudhakarinfotech</td>
 	</tr>

 	<tr>
 		<td>Bulma</td>
 		<td>sudhakarinfotech</td>
 	</tr>
 </tbody>	
</table>
        
Source Code:Output
Tutorials Platforms
Bootstrap 5 sudhakarinfotech
Bootstrap 4 sudhakarinfotech
Bulma sudhakarinfotech

Here, .table class is used to make a simple Bootstrap 5 table and .table-bordered class is used to add horizontal border in the Bootstrap 5 simple table. At the end, .table-striped class is used to create striped table.

Responsive Bordered Table

To create a responsive Bootstrap bordered table, Add the .table,and .table-bordered classes to the <table>, and puts it into an external wrapper i.e. div, and assign it to .table-responsive class.

General Syntax

      <div class="table-responsive">
  <table class="table">
      ...
  </table>
</div>
  

Source Code

          <div class="table-responsive">
<table class="table table-bordered">
 <thead>
 	<tr>
 		<th>Name</th>
 		<th>Designation</th>
 		<th>Salary</th>
 	</tr>
 </thead>
 <tbody>
 	<tr>
 		<td>Smith</td>
 		<td>Web Developer</td>
 		<td>2000$</td>
 	</tr>

 	<tr>
 		<td>Jane</td>
 		<td>Mobile Developer</td>
 		<td>2500$</td>
 	</tr>

 	<tr>
 		<td>Smith Dev</td>
 		<td>Graphics Designer</td>
 		<td>1400$</td>
 	</tr>
 </tbody>	
</table>
</div>
        
Source Code:Output
Name Designation Salary
Smith Web Developer 2000$
Jane Mobile Developer 2500$
Smith Dev Graphics Designer 1400$

Here, .table-responsive class is responsible to make the table responsive in Bootstrap 5 at all breakpoints.

Online Test / Quiz

Web Tutorials

Bootstrap 5 Bordered Table
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4