Tag | Description |
---|---|
<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 Must be used within a <thead> |
<caption> |
Description or summary of what the table holds, especially useful for screen readers |
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr></tbody></table>
Name | Class | Description |
---|---|---|
Default | None | No styles, just columns and rows |
Basic | .table |
Only horizontal lines between rows |
Bordered | .table-bordered |
Rounds corners and adds outer border |
Zebra-stripe | .table-striped |
Adds light gray background color to odd rows (1, 3, 5, etc) |
Condensed | .table-condensed |
Cuts vertical padding in half, from 8px to 4px, within all td and th elements |
Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table
class is required.
<table class="table"></table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Get a little fancy with your tables by adding zebra-striping—just add the .table-striped
class.
Note: Striped tables use the :nth-child
CSS selector and is not available in IE7-IE8.
<table class="table table-striped"></table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Add borders around the entire table and rounded corners for aesthetic purposes.
<table class="table table-bordered"></table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Make your tables more compact by adding the .table-condensed
class to cut table cell padding in half (from 8px to 4px).
<table class="table table-condensed"></table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.
<table class="table table-striped table-bordered table-condensed">...</table>
Full name | |||
---|---|---|---|
# | First Name | Last Name | Username |
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |