Welcome to Kalypso Template, a wonderful and premium product for multipurpose websites
Tables
Default styles
For basic styling—light padding and only horizontal dividers—add the base class .table
to any <table>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
[table] <table> … </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-IE8).
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird [table type="table-striped"] <table> … </table> [/table]
.table-bordered
Add borders and rounded corners to the table.
# First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the Bird [table type="table-bordered"] <table> … </table> [/table]
.table-hover
Enable a hover state on table rows within a
<tbody>
.
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird [table type="table-hover"] <table> … </table> [/table]
.table-condensed
Makes tables more compact by cutting cell padding in half.
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird [table type="table-condensed"] <table> … </table> [/table]
Optional row classes
Use contextual classes to color table rows.
Class Description .success
Indicates a successful or positive action. .error
Indicates a dangerous or potentially negative action. .warning
Indicates a warning that might need attention. .info
Used as an alternative to the default styles.
# Product Payment Taken Status 1 TB – Monthly 01/04/2012 Approved 2 TB – Monthly 02/04/2012 Declined 3 TB – Monthly 03/04/2012 Pending 4 TB – Monthly 04/04/2012 Call 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.
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) labelsMust be used within a <thead>
<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>