| 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 |
<!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>
Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions