All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.
-| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
Tables are automatically styled with only the a few borders to ensure readability and maintain structure. No classes are required.
<table> ... </table>+
| # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Mark | +Otto | +CSS | +
| 2 | +Jacob | +Thornton | +Javascript | +
| 3 | +Stu | +Dent | +HTML | +
Get a little fancy with your tables by adding zebra-striping—just add the .striped-table class.
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.
-++-++Get a little fancy with your tables by adding zebra-striping—just add the
+.striped-tableclass.Note: Sprited tables use the
+:nth-childCSS selector and is not available in IE7-IE8.<table class="striped-table"> ... </table>++++ +
++ + + +# +First Name +Last Name +Language ++ +1 +Mark +Otto +CSS ++ +2 +Jacob +Thornton +Javascript ++ + +3 +Stu +Dent +HTML +
3. Bordered table
-Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.
-
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some One | -HTML | -|
| 2 | -Joe | -Sixpack | -Javascript | -3 | -Joe | -Sixpack | - -
| 3 | -Stu | -Dent | -CSS | -
Add borders around the entire table and rounded corners for aesthetic purposes.
<table class="bordered-table"> ... </table>+
| # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Mark Otto | +CSS | +|
| 2 | +Jacob | +Thornton | +Javascript | +3 | +Stu | +Dent | + +
| 3 | +Brosef | +Stalin | +HTML | +
Make your tables more compact by adding the .condensed-table class to cut table cell padding in half (from 10px to 5px).
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
+++ -++Make your tables more compact by adding the
+.condensed-tableclass to cut table cell padding in half (from 10px to 5px).<table class="condensed-table"> ... </table>++++ +
++ + + +# +First Name +Last Name +Language ++ +1 +Mark +Otto +CSS ++ +2 +Jacob +Thornton +Javascript ++ + +3 +Stu +Dent +HTML +
5. Striped table w/ TableSorter.js
-Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.
-
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Your | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
Include the jQuery Tablesorter plugin and automaically get clear styles for sorted columns.
-<script src="js/jquery/jquery.tablesorter.min.js"></script>
+<script src="jquery.tablesorter.js"></script>
<script >
$(function() {
- $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
+ $("table#sortTableExample")
+ .tablesorter({
+ sortList: [[1,0]]
+ });
});
</script>
<table class="striped-table">
...
</table>
-
+ | # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Mark | +Otto | +CSS | +
| 2 | +Jacob | +Thornton | +Javascript | +
| 3 | +Stu | +Dent | +HTML | +
| 4 | +Brosef | +Stalin | +HTML | +
Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.
+| # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Mark | +Otto | +CSS | +
| 2 | +Jacob | +Thornton | +Javascript | +
| 3 | +Stu | +Dent | +HTML | +
| 4 | +Brosef | +Stalin | +HTML | +