Introduction:

In this tutorial you'll learn how to design a table using Bootstrap.

Description:

The HTML tables are used to present data in grid format like row and columns.

See the tutorial on HTML Tables to learn more about tables.

Creating a Simple Table with Bootstrap :

You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's table class.

<!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">
    <title>Example of Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .bs-example {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="bs-example">
        <table class="table">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>rajeev</td>
                    <td>kumar</td>
                    <td>rajeev@mail.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>pawan</td>
                    <td>singh</td>
                    <td>pawan@mail.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>rohit</td>
                    <td>john</td>
                    <td>rohit@mail.com</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

 The output of the above example will look something like this:

how to design table using bootstrap

Click here to read more about bootstrap table.



  Modified On Feb-06-2019 11:59:53 AM

Leave Comment