LearnKode

6 Example(s) of Bootstrap Tables


Description :

.table-bordered class adds the border for each cell of the table.


Bootstrap Tables Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Table Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Qualification</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Morse</td>
                    <td>MCA</td>
                </tr>
                <tr>
                    <td>Mark</td>
                    <td>juke</td>
                    <td>B.TECH</td>
                </tr>
                <tr>
                    <td>Max</td>
                    <td>Ponting</td>
                    <td>PHD</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.table table.condensed class makes the table more compact by cutting the padding of cells.


Bootstrap Tables Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>Bootstrap Table Example</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Qualification</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Morse</td>
                    <td>MCA</td>
                </tr>
                <tr>
                    <td>Mark</td>
                    <td>juke</td>
                    <td>B.TECH</td>
                </tr>
                <tr>
                    <td>Max</td>
                    <td>Ponting</td>
                    <td>PHD</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this style, we can give different classes to different rows to give them different colours.


Bootstrap Tables Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Table Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Qualification</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>John</td>
                    <td>Morse</td>
                    <td>MCA</td>
                </tr>
                <tr class="warning">
                    <td>Mark</td>
                    <td>juke</td>
                    <td>B.TECH</td>
                </tr>
                <tr class="info">
                    <td>Max</td>
                    <td>Ponting</td>
                    <td>PHD</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.table.hover class adds a hover effect in the table.


Bootstrap Tables Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Table Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Qualification</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Morse</td>
                    <td>MCA</td>
                </tr>
                <tr>
                    <td>Mark</td>
                    <td>juke</td>
                    <td>B.TECH</td>
                </tr>
                <tr>
                    <td>Max</td>
                    <td>Ponting</td>
                    <td>PHD</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.table-responsive class used to make a table responsive(means adjusting of design according to the size of screen).


Bootstrap Tables Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Table Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Qualification</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John</td>
                        <td>Morse</td>
                        <td>MCA</td>
                    </tr>
                    <tr>
                        <td>Mark</td>
                        <td>juke</td>
                        <td>B.TECH</td>
                    </tr>
                    <tr>
                        <td>Max</td>
                        <td>Ponting</td>
                        <td>PHD</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

  • .table table.striped class is used to add Zebra strips in the table. 
  • .table class gives the basic styling of table.


Bootstrap Tables Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Table Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Qualification</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Morse</td>
                    <td>MCA</td>
                </tr>
                <tr>
                    <td>Mark</td>
                    <td>juke</td>
                    <td>B.TECH</td>
                </tr>
                <tr>
                    <td>Max</td>
                    <td>Ponting</td>
                    <td>PHD</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Try it » Download Example »

Output