| Labels | -Markup | +{{_i}}Labels{{/i}} | +{{_i}}Markup{{/i}} | |||
|---|---|---|---|---|---|---|
| - Default + {{_i}}Default{{/i}} |
- <span class="label">Default</span>
+ <span class="label">{{_i}}Default{{/i}}</span>
|
|||||
| - New + {{_i}}New{{/i}} |
- <span class="label success">New</span>
+ <span class="label success">{{/_i}}New{{/i}}</span>
|
|||||
| - Warning + {{_i}}Warning{{/i}} |
- <span class="label warning">Warning</span>
+ <span class="label warning">{{_i}}Warning{{/i}}</span>
|
|||||
| - Important + {{_i}}Important{{/i}} |
- <span class="label important">Important</span>
+ <span class="label important">{{_i}}Important{{/i}}</span>
|
|||||
| - Notice + {{_i}}Notice{{/i}} |
- <span class="label notice">Notice</span>
+ <span class="label notice">{{_i}}Notice{{/i}}</span>
|
| Tag | -Description | +{{_i}}Tag{{/i}} | +{{_i}}Description{{/i}} | - Wrapping element for displaying data in a tabular format + {{_i}}Wrapping element for displaying data in a tabular format{{/i}} | ||
|---|---|---|---|---|---|---|
- Container element for table header rows (<tr>) to label table columns
+ {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}}
|
||||||
- Container element for table rows (<tr>) in the body of the table
+ {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}}
|
||||||
- Container element for a set of table cells (<td> or <th>) that appears on a single row
+ {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}}
|
||||||
| - Default table cell + {{_i}}Default table cell{{/i}} | ||||||
|
- Special table cell for column (or row, depending on scope and placement) labels - Must be used within a <thead>
+ {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}+ {{_i}}Must be used within a <thead>{{/i}}
|
||||||
| - Description or summary of what the table holds, especially useful for screen readers + {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} |
| Name | -Class | -Description | +{{_i}}Name{{/i}} | +{{_i}}Class{{/i}} | +{{_i}}Description{{/i}} |
|---|---|---|---|---|---|
| Default | -None | -No styles, just columns and rows | +{{_i}}Default{{/i}} | +{{_i}}None{{/i}} | +{{_i}}No styles, just columns and rows{{/i}} |
| Basic | +{{_i}}Basic{{/i}} |
.table
|
- Only horizontal lines between rows | +{{_i}}Only horizontal lines between rows{{/i}} | |
| Bordered | +{{_i}}Bordered{{/i}} |
.table-bordered
|
- Rounds corners and adds outter border | +{{_i}}Rounds corners and adds outter border{{/i}} | |
| Zebra-stripe | +{{_i}}Zebra-stripe{{/i}} |
.table-striped
|
- Adds light gray background color to odd rows (1, 3, 5, etc) | +{{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}} | |
| Condensed | +{{_i}}Condensed{{/i}} |
.table-condensed
|
- Cuts vertical padding in half, from 8px to 4px, within all td and th elements |
+ {{_i}}Cuts vertical padding in half, from 8px to 4px, within all td and th elements{{/i}} |
Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.
{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.{{/i}}
<table class="table"> - ... + … </table>
Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.
Note: Sprited tables use the :nth-child CSS selector and is not available in IE7-IE8.
{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.{{/i}}
{{_i}}Note: Sprited tables use the :nth-child CSS selector and is not available in IE7-IE8.{{/i}}
<table class="table table-striped"> - ... + … </table>
Add borders around the entire table and rounded corners for aesthetic purposes.
+{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}
<table class="table table-bordered"> - ... + … </table>
Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 10px to 5px).
{{_i}}Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).{{/i}}
<table class="table table-condensed"> - ... + … </table>
Include the jQuery Tablesorter plugin and automaically get clear styles for sorted columns.
+{{_i}}Include the jQuery Tablesorter plugin and automatically get clear styles for sorted columns.{{/i}}
<script src="jquery.tablesorter.js"></script> <script > @@ -722,7 +722,7 @@ }); </script> <table class="table table-striped"> - ... + … </table>
Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.
+{{_i}}Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.{{/i}}
| # | -First Name | -Last Name | -Language | +{{_i}}First Name{{/i}} | +{{_i}}Last Name{{/i}} | +{{_i}}Language{{/i}} |
|---|