Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain the basic table in Bootstrap

  • Last Updated : 13 Sep, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

 

 

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

 

 

Output:

 

 

Supported Browsers:

 

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

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!