HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A basic Bootstrap table has a light padding and only horizontal dividers
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table
class adds basic styling to a table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-striped
class adds zebra-stripes to a table:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-bordered
class adds borders on all sides of the table and cells:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-hover
class adds a hover effect (grey background color) on table rows:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
The .table-condensed
class makes a table more compact by cutting cell padding in half:
Firstname | Lastname |
---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
Contextual classes can be used to color table rows (<tr>
) or table cells (<td>
):
Firstname | Lastname |
---|
Default | Defaultson | def@somemail.com |
Success | Doe | john@example.com |
Danger | Moe | mary@example.com |
Info | Dooley | july@example.com |
Warning | Refs | bo@example.com |
Active | Activeson | act@example.com |
The contextual classes that can be used are:
.active |
Applies the hover color to the table row or table cell |
.success |
Indicates a successful or positive action |
.info |
Indicates a neutral informative change or action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
The .table-responsive
class creates a responsive table. The table will then
scroll horizontally on small devices (under 768px). When viewing on anything
larger than 768px wide, there is no difference:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Add a class attribute to style the table as a basic Bootstrap table.
<table > <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> <tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> <table>
For a complete reference of all table classes, go to our complete Bootstrap Tables Reference.