Bootstrap 5 Tables

Bootstrap 5 tables are basically a series of rows and columns that contain data in a cell. Bootstrap table class is used to enhance the look of the table.

Bootstrap 5 Table Classes

There are different predefined Bootstrap 5 table classes that are used to enhance the HTML table appearance. These classes are:.table, .table-striped, .table-dark, .table-bordered, .table-borderless, .table-active, .table-hover, .table-sm, etc.

Bootstrap 5 Table Types

Bootstrap 5 provides different types of table based on the predefined table classes. These are:

Basic Table
Striped Table
Dark table
Bordered Table
Borderless Table
Bordered Table
Active Table
Small Table
Responsive Table

Basic Table

To make a simple table in Bootstrap 5, use .table class to the <table> element.It has 8px cell padding and horizontal dividers.

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

General Syntax

      <table class="table"></table>

Try it now

Source Code

          <div class="mt-5">
<table class="table ">
  <thead>
     <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
     </tr>
     <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
     </tr>
     <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
     </tr>
  </tbody>
</table>
</div>

Try it now

Dark table

To create a table with a dark background, add an extra .table-dark class to the <table> element's base class i.e. <table class=" table table-dark">.

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

General Syntax

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

Try it now

Source Code

          <table class="table table-dark   ">
  <thead>
     <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
     </tr>
     <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
     </tr>
     <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
     </tr>
  </tbody>
</table>

Try it now

Striped Dark Table

Apply .table-striped class to <table> element's base class. This class adds zebra stripes to a table.

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

General Syntax

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

Try it now

Source Code

          <table class="table table-dark table-striped table-responsive">
  <thead>
     <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
     </tr>
     <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
     </tr>
     <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
     </tr>
  </tbody>
</table>

Try it now

Bordered Table

Apply .table-bordered class to <table> base class. This class adds borders on all sides of the table and cells.

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

General Syntax

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

Try it now

Source Code

          <table class="table table-bordered">
<thead>
<tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Work</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
	<td>Smith</td>
	<td>Jane</td>
	<td>Web Designer</td>
</tr>
<tr>
    <td>2</td>
    <td>John</td>
    <td>Doe</td>
    <td>Graphics Designer</td>
</tr>
<tr>
    <td>3</td>
    <td>Andre</td>
    <td>Ren</td>
    <td>Developer</td>
</tr>
</tbody>
</table>

Try it now

Code Explanation

Note: To create bootstrap bordered dark table, assign .table , .bordered-table to the <table> base class.

Bootstrap 5 Responsive Table

To create a responsive table in Bootstrap 5 , simply wrap the table inside the external wrapper and assign either .table-responsive{-sm|-md|-lg|-xl|-xxl} or .table-responsive class to the external wrapper's base class. The .table-responsive{-sm|-md|-lg|-xl|-xxl} class creates a responsive table up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

Bootstrap 5 Responsive Table Example

In this example, you can observe Bootstrap 5 table responsive behaviour in small screen size.

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

General Syntax

      <!-----Responsive Table For All Breakpoints------>
<div class="table-responsive">
     <table class="table"></table>
</div>
<!-----Responsive Table For A Specific Breakpoint------>
<div class="table-responsive-{sm | md | lg | xl | xxl}">
     <table class="table"></table>
</div>

Try it now

Source Code

          <div class="table-responsive">
<table class="table ">
  <thead>
     <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Work</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>Smith</td>
        <td>Jane</td>
        <td>Web Designer</td>
     </tr>
     <tr>
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <td>Graphics Designer</td>
     </tr>
     <tr>
        <td>3</td>
        <td>Andre</td>
        <td>Ren</td>
        <td>Developer</td>
     </tr>
  </tbody>
</table>
</div>

Try it now

Table Head Color

Apply the .table-light or .table-dark class to the table <thead> element's base class. It creates a table with a light head and a dark head, respectively.

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Oliza	Ren	Developer

General Syntax

      <thead class="table-light"></thead>
<thead class="table-dark"></thead>

Try it now

Source Code

          <table class="table ">
<thead class="table-light">
 <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Work</th>
 </tr>
</thead>
<tbody>
 <tr>
    <td>1</td>
    <td>Smith</td>
    <td>Jane</td>
    <td>Web Designer</td>
 </tr>
 <tr>
    <td>2</td>
    <td>John</td>
    <td>Doe</td>
    <td>Graphics Designer</td>
 </tr>
 <tr>
    <td>3</td>
    <td>Oliza</td>
    <td>Ren</td>
    <td>Developer</td>
 </tr>
</tbody>
</table>

Try it now

Tables Color

Bootstrap 5 provides different predefined classes such as .table-* classes that are used to provide background color to the table, table row, or table cell. Here * denotes success, info, warning, danger, primary, secondary, etc .

Example

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Oliza	Ren	Developer

General Syntax

      <table class="table-primary">   </table>
    <!-- On rows -->
  <tr class="table-primary">  </tr>
 <!-- On cells (td or th) -->
<td class="table-primary">   </td>

Try it now

Source Code

          <table class="table table-primary">
<thead class="table-light">
 <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Work</th>
 </tr>
</thead>
<tbody>
 <tr class="table-success">
    <td>1</td>
    <td>Smith</td>
    <td>Jane</td>
    <td>Web Designer</td>
 </tr>
 <tr class="table-info">
    <td>2</td>
    <td>John</td>
    <td>Doe</td>
    <td>Graphics Designer</td>
 </tr>
 <tr>
    <td>3</td>
    <td>Oliza</td>
    <td>Ren</td>
    <td>Developer</td>
 </tr>
</tbody>
</table>

Try it now

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

Bootstrap 5 Tables

Bootstrap 5 Table Classes

Bootstrap 5 Table Types

Basic Table

Dark table

Striped Dark Table

Bordered Table

Bootstrap 5 Responsive Table

Bootstrap 5 Responsive Table Example

Table Head Color

Tables Color

Related Tutorial

Online Test / Quiz

Web Tutorials