Bootstrap - Tables



This chapter will discuss about bootstrap tables and the classes to create table. Tables is used to organize data in the form of rows and columns. Tables allow you to group huge amounts of data and present them clearly and in an orderly manner. Some table items supported by Bootstraps are listed below.

Sr.No. Tag & Description
1

<table>

Wrapping element for displaying data in a tabular format

2

<thead>

Container element for table header rows (<tr>) to label table columns.

3

<tbody>

Container element for table rows (<tr>) in the body of the table.

4

<tr>

Container element for a set of table cells (<td> or <th>) that appears on a single row.

5

<td>

Default table cell.

6

<th>

Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>

7

<caption>

Defines a table caption

Simple table

If you want a basic table style with just a little light padding and horizontal dividers, add the .table class at table, as shown in the example below.

Example

You can edit and try running this code using Edit & Run option.


<DOCTYPE html >
<html lang="en">
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title >Bootstrap - Table</title >
</head >
<body >
    <table class="table" >
    <thead >
        <tr >
            <th scope="col" >Sr.No.</th >
            <th scope="col" >Name</th >
            <th scope="col" >Role</th >
            <th scope="col" >Salary</th >
            </tr >
    </thead >
    <tbody >
        <tr >
            <th scope="row" >1</th >
            <td >Jhon</td >
            <td >Software Developer</td >
            <td >40000</td >
        </tr >
        <tr >
            <th scope="row" >2</th >
            <td >David</td >
            <td >Tester</td >
            <td >50000</td >
        </tr >
        <tr >
            <th scope="row" >3</th >
            <td >Mary</td >
            <td >Data Analyst</td >
            <td >35000</td >
        </tr >
    </tbody >
    </table >
</body >
</html >

Variants

The contextual classes allow you to change the background color of your table rows or individual cells. Add classes .table-active, .table-success, .table-danger, .table-warning class to Highlight a table row or cell, as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Table</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr class="table-default">
            <th scope="row">1</th>
            <td>Oliver</td>
            <td>Full satck developer</td>
            <td>40000</td>
          </tr>
          <tr class="table-primary">
            <th scope="row">2</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>43000</td>
          </tr>
          <tr class="table-secondary">
            <th scope="row">3</th>
            <td>David</td>
            <td>Tester</td>
            <td>60000</td>
          </tr>
          <tr class="table-info">
            <th scope="row">4</th>
            <td>Sam</td>
            <td>Software Developer</td>
            <td>35000</td>
          </tr>
          <tr class="table-danger">
            <th scope="row">5</th>
            <td>Mary</td>
            <td>Data Analyst</td>
            <td>36000</td>
          </tr>
          <tr class="table-success">
            <th scope="row">6</th>
            <td>James</td>
            <td>Tester</td>
            <td>47000</td>
          </tr>
          <tr class="table-active">
            <th scope="row">7</th>
            <td>Mary</td>
            <td>HR</td>
            <td>90000</td>
          </tr>
          <tr class="table-light">
            <th scope="row">8</th>
            <td>Noah</td>
            <td>Data Analyst</td>
            <td>50000</td>
          </tr>
          <tr class="table-warning">
            <th scope="row">9</th>
            <td>Lucas</td>
            <td>Software Developer</td>
            <td>52000</td>
          </tr>
          <tr class="table-dark">
            <th scope="row">10</th>
            <td>Almand</td>
            <td>Software Developer</td>
            <td>73000</td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>

Accented tables

Striped rows

To get zebra-striping on the rows add .table-striped class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Striped columns

To get zebra-striping on the columns add .table-striped-columns class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-striped-columns">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>

        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>40000</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>David</td>
            <td>Tester</td>
            <td>50000</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Mary</td>
            <td>Data Analyst</td>
            <td>35000</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Add the classes .table-dark and .table-striped to get the dark color zebra-striping on the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-dark  table-striped">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Add the classes .table-dark and .table-striped-columns to get the dark color zebra-striping columns.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-dark  table-striped-columns">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Add the classes .table-success and .table-striped to get the light green color zebra-striping on the table.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Table</title>
    </head>
    <body>
      <table class="table  table-success table-striped">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Jhon</td>
                  <td>Software Developer</td>
                  <td>40000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>David</td>
                  <td>Tester</td>
                  <td>50000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Mary</td>
                  <td>Data Analyst</td>
                  <td>35000</td>
                </tr>
              </tbody>
         </table>
     </body>
    </html>

Add the classes .table-success and .table-striped-columns to get the light green color zebra-striping columns on the table.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Table</title>
    </head>
    <body>
      <table class="table  table-success table-striped-columns">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Jhon</td>
                  <td>Software Developer</td>
                  <td>40000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>David</td>
                  <td>Tester</td>
                  <td>50000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Mary</td>
                  <td>Data Analyst</td>
                  <td>35000</td>
                </tr>
              </tbody>
         </table>
     </body>
    </html>

Hoverable rows

Add the .table-hover class to get the hover effect on table rows as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-hover  table-secondary">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Add the classes .table-hover and .table-dark to get the dark color hover effect on table rows.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Table</title>
    </head>
    <body>
      <table class="table  table-dark table-hover">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Jhon</td>
                  <td>Software Developer</td>
                  <td>40000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>David</td>
                  <td>Tester</td>
                  <td>50000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Mary</td>
                  <td>Data Analyst</td>
                  <td>35000</td>
                </tr>
              </tbody>
         </table>
     </body>
    </html>

Add the classes .table-hover and .table-striped to get the hover effect with zebra-striping on the table.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
       <title>Bootstrap - Table</title>
    </head>
    <body>
     <table class="table  table-hover  table-striped">
       <thead>
               <tr>
                 <th scope="col">Sr.No.</th>
                 <th scope="col">Name</th>
                 <th scope="col">Role</th>
                 <th scope="col">Salary</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <th scope="row">1</th>
                 <td>Jhon</td>
                 <td>Software Developer</td>
                 <td>40000</td>
               </tr>
               <tr>
                 <th scope="row">2</th>
                 <td>David</td>
                 <td>Tester</td>
                 <td>50000</td>
               </tr>
               <tr>
                 <th scope="row">3</th>
                 <td>Mary</td>
                 <td>Data Analyst</td>
                 <td>35000</td>
               </tr>
             </tbody>
        </table>
    </body>
    </html>

Active table

Add .table-active class to highlight the row or cell of the table.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr class="table-active">
            <th scope="row">1</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>40000</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>David</td>
            <td>Tester</td>
            <td>50000</td>
        </tr>
        <tr class="table-active">
            <th scope="row">3</th>
            <td >mery</td>
            <td>Data Analyst</td>
            <td>35000</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Bordered table

To get boundaries around each item and rounded corners around the whole table add .table-bordered class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-bordered  border-primary">
    <thead>
        <tr>
         <th scope="col">Sr.No.</th>
         <th scope="col">Name</th>
         <th scope="col">Role</th>
         <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Tables without borders

To get the table without borders add .table-borderless class in the .tbody as shown in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-borderless">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Small tables

To make table more compact by cutting all cell padding in half by adding .table-sm class to any .table, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-sm">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Table group dividers

To make table border thicker and darker between table groups .thead, .tbody and .tfoot add a .table-sm class, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
       <table class="table">
        <thead>
            <tr>
               <th scope="col">Sr.No.</th>
               <th scope="col">Name</th>
               <th scope="col">Role</th>
               <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody class="table-group-divider">
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Vertical alignment

The cells of the <thead> table are always vertically aligned to the bottom. The cells in the <tbody> table inherit their alignment from <table> and are aligned to the top by default. Use the vertical alignment classes to re-align as required

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Tables</title>
</head>
<body>
    <div class="table-responsive">
    <table class="table align-middle">
        <thead>
         <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
              <th scope="col">Salary</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr class="align-bottom">
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mery</td>
                <td class="align-top">Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
</html>

Responsive table

Responsive tables enable horizontal scrolling of the table. Wrapping class .table with .table-responsive makes a table responsive across different view ports. Add a maximum breakpoint to a responsive table by using .table-responsive{-sm|-md|-lg|-xl|-xxl}. Following table depicts the screensize and respective Bootstrap table class:

Class Screen width
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Age</th>
                <th scope="col">Blood Group</th>
                <th scope="col">gender</th>
                <th scope="col">Address</th>
                <th scope="col">Married</th>
                <th scope="col">Education</th>
                <th scope="col">AdharCard Number</th>
                <th scope="col">Pan Number</th>
                <th scope="col">City</th>
                <th scope="col">Country</th>
                <th scope="col">Salary</th>
                <th scope="col">status</th>
                <th scope="col">status</th>
                <th scope="col">status</th>
                <th scope="col">status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>32</td>
                <td>A+</td>
                <td>Male</td>
                <td>Pune,Maharashtra.</td>
                <td>Yes</td>
                <td>B.E(Computer Science)</td>
                <td>0101010101010101</td>
                <td>2020200202020202</td>
                <td>Pune</td>
                <td>India</td>
                <td>40000</td>
                <td>yes</td>
                <td>yes</td>
                <td>yes</td>
                <td>yes</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
</html>

Nesting

Table nesting is used to create a table inside of a table, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <thead class="table">
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
            <td colspan="4">
                <table class="table mb-0  table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Sr.No.</th>
                            <th scope="col">Name</th>
                            <th scope="col">Role</th>
                            <th scope="col">Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Almand</td>
                            <td>Software Developer</td>
                            <td>60000</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>David</td>
                            <td>Tester</td>
                            <td>35000</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Sam</td>
                            <td>Data Analyst</td>
                            <td>40000</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Mona</td>
                <td>Data Analyst</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Oliver</td>
                <td>Tester</td>
                <td>45000</td>
                </tr>
        </tbody>
    </table>
</body>
</html>

Anatomy

Table head

Add classes .table-secondary to make table head gray color, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
    <thead class="table-secondary">
        <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>40000</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>David</td>
            <td>Tester</td>
            <td>50000</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td >mery</td>
            <td>Data Analyst</td>
            <td>35000</td>
            </tr>
         </tbody>
    </table>
</body>
</html>

Table foot

The .tfoot class add footer at the end of the table, as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td >mery</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">footer</th>
                <td >footer</td>
                <td>footer</td>
                <td>footer</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Caption

A <caption> functions use to give a heading for a table., as seen in the below example.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <caption>List of Employees</caption>
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td >mery</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
Advertisements