#    
## Overview
Creating a table in Bootstrap is easy, but we need to have sufficient knowledge of Bootstrap to carry out this task.

Bootstrap 4 provides us with various classes, which are used to apply different stylings to our table. These classes perform functions such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, and so on. Bootstrap also provides classes for making tables responsive. 

Now, we will learn how to create a simple table in Bootstrap 4.

## Create a simple table in Bootstrap

We use the **<code>.table</code> class** with the <code>table</code> and its components <code>thead</code>, <code>tbody</code>, <code>tr</code>, <code>th</code>, and <code>td</code> tags to create a table in Bootstrap.

The example given below shows us how to create a table in Bootstrap 4:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1  class="text-center text-primary">Bootstrap 4 Table</h1>
    <table class="table">
        <thead>
           <tr>
               <th>S. No.</th>
               <th>Name</th>
               <th>Age</th>
               <th>Email</th>
            </tr> 
        </thead> 

        <tbody>
            <tr>
                <td>1.</td>
                <td>Akande Olalekan</td>
                <td>22</td>
                <td>akandeolalekantoheeb94@gmail.com</td>
            </tr>

             <tr>
                <td>2.</td>
                <td>Ajala Hadi</td>
                <td>25</td>
                <td>hadiajala@gmail.com</td>
            </tr>

             <tr>
                <td>3.</td>
                <td>Oyebode Timileyin</td>
                <td>29</td>
                <td>oyebodetimileyin7@gmail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

codemirror

## Code explanation

* **Line 14**: We write a <code>table</code> with the <code>.table</code> class in the code to set up our Bootstrap table.

* **Lines 15–22**: We set up the table head. The <code>thead</code> tag sets up the head for us. <code>tr</code> stands for the table row and it sets up a row for us in the head, while the <code>th</code> tag is a helping tag that sets up the table heads in the rows. 

* **Lines 24–45**: We create the table data. The <code>tbody</code> tag helps in setting up a table body, the <code>tr</code> tag sets up the rows, while <code>td</code>, which stands for table data, sets up the data in the rows.

* **Line 45**: This line indicates the closing tag of our table. The table ends here.

How to create a table in Bootstrap 4

Use the .table class in Bootstrap 4 to create styled, responsive tables with thead, tbody, tr, th, and td tags.