Tables


Class Name Used for
table

A basic Bootstrap table has a light padding and only horizontal dividers.

table-bordered

adds borders on all sides of the table and cells

table-striped

adds zebra-stripes to a table

table-hover

adds a hover effect (grey background color) on table rows.

table-condensed

makes a table more compact by cutting cell padding.

Contextual Classes

used to color table rows or cells.

table-responsive

the table will then scroll horizontally on small devices

Source Code

<!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">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
</head>
<body>
    <div class="container">
        <h3>Bootstrap Tables</h3>
        <table class="table">
            <tr>
                <th>Sno</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
                <th>Contact</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Sam</td>
                <td>25</td>
                <td>sam@gmail.com</td>
                <td>95858585853</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ram</td>
                <td>25</td>
                <td>ram@gmail.com</td>
                <td>69588338552</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ravi</td>
                <td>22</td>
                <td>Ravi@gmail.com</td>
                <td>85957585855</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Kumar</td>
                <td>20</td>
                <td>kumar@gmail.com</td>
                <td>32585858858</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Sundar</td>
                <td>20</td>
                <td>sundar@gmail.com</td>
                <td>95825858258</td>
            </tr>
        </table>

        <table class="table table-striped">
            <tr>
                <th>Sno</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
                <th>Contact</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Sam</td>
                <td>25</td>
                <td>sam@gmail.com</td>
                <td>95858585853</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ram</td>
                <td>25</td>
                <td>ram@gmail.com</td>
                <td>69588338552</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ravi</td>
                <td>22</td>
                <td>Ravi@gmail.com</td>
                <td>85957585855</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Kumar</td>
                <td>20</td>
                <td>kumar@gmail.com</td>
                <td>32585858858</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Sundar</td>
                <td>20</td>
                <td>sundar@gmail.com</td>
                <td>95825858258</td>
            </tr>
        </table>

        <table class="table table-bordered table-hover">
            <tr>
                <th>Sno</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
                <th>Contact</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Sam</td>
                <td>25</td>
                <td>sam@gmail.com</td>
                <td>95858585853</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ram</td>
                <td>25</td>
                <td>ram@gmail.com</td>
                <td>69588338552</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ravi</td>
                <td>22</td>
                <td>Ravi@gmail.com</td>
                <td>85957585855</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Kumar</td>
                <td>20</td>
                <td>kumar@gmail.com</td>
                <td>32585858858</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Sundar</td>
                <td>20</td>
                <td>sundar@gmail.com</td>
                <td>95825858258</td>
            </tr>
        </table>

        <table class="table table-condensed">
            <tr>
                <th>Sno</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
                <th>Contact</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Sam</td>
                <td>25</td>
                <td>sam@gmail.com</td>
                <td>95858585853</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ram</td>
                <td>25</td>
                <td>ram@gmail.com</td>
                <td>69588338552</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ravi</td>
                <td>22</td>
                <td>Ravi@gmail.com</td>
                <td>85957585855</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Kumar</td>
                <td>20</td>
                <td>kumar@gmail.com</td>
                <td>32585858858</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Sundar</td>
                <td>20</td>
                <td>sundar@gmail.com</td>
                <td>95825858258</td>
            </tr>
        </table>

        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>Sno</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                    <th>Contact</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Sam</td>
                    <td>25</td>
                    <td>sam@gmail.com</td>
                    <td>95858585853</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Ram</td>
                    <td>25</td>
                    <td>ram@gmail.com</td>
                    <td>69588338552</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Ravi</td>
                    <td>22</td>
                    <td>Ravi@gmail.com</td>
                    <td>85957585855</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Kumar</td>
                    <td>20</td>
                    <td>kumar@gmail.com</td>
                    <td>32585858858</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Sundar</td>
                    <td>20</td>
                    <td>sundar@gmail.com</td>
                    <td>95825858258</td>
                </tr>
            </table>
        </div>
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>
To download raw file Click Here