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

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4