Open In App

Explain the basic table in Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap provides a wide variety of tables with different styles and colors, some with responsive designs and others with hoverable effects. Different classes can be used to style the table differently or enabling its various functionalities like table compacting, changing heading appearance, etc, in bootstrap. These classes are used according to the user preferences to get the desired appearance.

Basic Bootstrap table: The basic bootstrap table can be created by using the .table class in the table tag of the HTML code. It has little styling in it, having only horizontal dividers. We can also add style to the table to make it look more attractive.

Styling Bootstrap tables: Some of the other classes for styling the tables in bootstrap are:

  • table-bordered: It is used to add borders to the table and the cells.
  • table-condensed: It cuts cell padding in half, making the table more compact and compressed.
  • table-dark: This class is used to change the table background color to black.
  • table-hover: It enables the hover functionality for a table row.
  • table-responsive: It is used to create a responsive table i.e. the table can change its appearance dynamically, according to the screen in which it is viewed. 

Below are the steps to use a basic Bootstrap table.

Step 1: Include the following stylesheet link to the code to add basic styling to the table i.e. horizontal dividers and padding.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>

Step 2: Adding the class, .table in the <table> tag.

Syntax:

<table class="table"> 
    <thead>
        <tr>
            <th scope="col">S. No.</td>
            <th scope="col">Topic</td>
            <th scope="col">Problems</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</td>
            <td>Array</td>
            <td>400</td>
        </tr>
    </tbody>
</table>

Example 1: In this example, we will create a basic bootstrap table using the above steps.

index.html




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Basic Table</title>
    <link rel="stylesheet" href=
  
    <style>
        .container{
            text-align:center;
            color:green;  
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Topic</td>
                    <th scope="col">Problems</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Array</td>
                    <td>400</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>String</td>
                    <td>623</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>maths</td>
                    <td>942</td>
                </tr>
                    <tr>
                    <th scope="row">4</td>
                    <td>recursion</td>
                    <td>160</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>


Output:

Example 2: In this example, we will create a basic bootstrap table and add the styling using table-dark and table-bordered classes.

index.html




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Basic Table</title>
    <link rel="stylesheet" href=
      
    <style>
        .container{
            text-align:center;
            color:green;  
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <table class="table table-dark table-bordered">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Topic</td>
                    <th scope="col">Problems</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Array</td>
                    <td>400</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>String</td>
                    <td>623</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>maths</td>
                    <td>942</td>
                </tr>
                    <tr>
                    <th scope="row">4</td>
                    <td>recursion</td>
                    <td>160</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>


Output:

Supported Browsers:

  • Internet Explorer 9.0
  • Firefox 3.6
  • Safari 4.0
  • Opera 10.5


Last Updated : 16 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads