Press "Enter" to skip to content

Table Examples in Bootstrap CSS

Definition :

Table is meant for displaying the content in rows and columns fashion.

Program :

<html lang=”en”>

   <head>

     <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width” initial scale=”1″>

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

     <script src href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css”> </script>

     <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”> </script>

                     <body>

                                    <div class=”contailer”>

                                                   <table class=”table table-striped”>

                                                      <tr>

                                                                     <td> Hello </td> <td> Hello </td>

                                                                   </tr>

                                                                   <tr>

                                                                      <td> Hello </td> <td> Hello </td>

                                                                    </tr>

                                                                                <tr>

                                                                                  <td> Hello </td> <td> Hello </td>

                                                                                </tr>

                                                                </table>

                                                                <table class=”table table-bordered”>

                                                                   <tr>

                                                                     <td> Hello1 </td> <td> Hello1 </td>

                                                                                </tr>

                                                                                <tr>

                                                                                  <td> Hello1 </td> <td> Hello1 </td>

                                                                                </tr>

                                                                                <tr>

                                                                                  <td> Hello1 </td> <td> Hello1 </td>

                                                                                </tr>

                                                                </table>

                                                                <table class=”table table-hover”>

                                                                   <tr>

                                                                     <td> Hello2 </td> <td> Hello2 </td>

                                                                                </tr>

                                                                                <tr>

                                                                                   <td> Hello2 </td> <td> Hello2 </td>

                                                                                </tr>

                                                                                <tr>

                                                  <td> Hello2 </td> <td> Hello2 </td>

                                                                </table>

                                                                <table class=”table table-condensed”>

                                                                   <tr>

                                                                     <td class=”active”> Hello3 </td>  <td class=”success”> Hello3 </td>

                                                                   </tr>

                                                                   <tr>

                                                                     <td class=”warning”> Hello3 </td> <td class=”info”> Hello3 </td>

                                                                   </tr>

                                                                   <tr>

                                                                     <td class=”danger”> Hello3 </td> <td> Hello3 </td>

                                                                    </tr>

                                                                </table>

                                                </div>

                                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *