Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table">  …</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table table-striped">  …</table>

.table-bordered

Add borders and rounded corners to the table.

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-bordered">  …</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-hover">  …</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-condensed">  …</table>

Optional row classes

Use contextual classes to color table rows.

ClassDescription
.successIndicates a successful or positive action.
.errorIndicates a dangerous or potentially negative action.
.warningIndicates a warning that might need attention.
.infoUsed as an alternative to the default styles.
#ProductPayment TakenStatus
1TB - Monthly01/04/2012Approved
2TB - Monthly02/04/2012Declined
3TB - Monthly03/04/2012Pending
4TB - Monthly04/04/2012Call in to confirm
...  <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td>  </tr>...

Supported table markup

List of supported table HTML elements and how they should be used.

TagDescription
<table>Wrapping element for displaying data in a tabular format
<thead>Container element for table header rows (<tr>) to label table columns
<tbody>Container element for table rows (<tr>) in the body of the table
<tr>Container element for a set of table cells (<td> or <th>) that appears on a single row
<td>Default table cell
<th>Special table cell for column (or row, depending on scope and placement) labels
<caption>Description or summary of what the table holds, especially useful for screen readers
<table>  <caption>...</caption>  <thead> <tr><th>...</th><th>...</th> </tr>  </thead>  <tbody> <tr><td>...</td><td>...</td> </tr>  </tbody></table>

Lorem ipsum dolor sit amet,lacus vitae felis vestibulum volutpat conse elit sed diam nonu mmy male suada fames ac velit esse cillum dolore lacus vitae felis.

Recent Post

SmallImageDLorem ipsum dolor sit amet, consectetuer adipiscing elit.

SmallImageCLorem ipsum dolor sit amet, consectetuer sed

SmallImageDLorem ipsum dolor sit amet, consectetuer adipiscing elit.

Recent Photos

BoxImgA BoxImgB BoxImgC

Image01 Image01 Image01