Bootstrap, from Twitter

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

Building tables

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.

Always wrap your column headers in a <thead> such that hierarchy is <thead> > <tr> > <th>.

Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> > <tr> > <td>.

Example: Default table styles

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
<table>
  ...
</table>

Example: Condensed table

For tables that require more data in tighter spaces, use the condensed flavor that cuts padding in half. It can also be used in conjunction with borders and zebra-stripes, just like the default table styles.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Example: Bordered table

Make your tables look just a wee bit sleeker by rounding their corners and adding borders on all sides.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
<table class="bordered-table">
  ...
</table>

Example: Zebra-striped

Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
span 4 columns
span 2 columns span 2 columns

Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

<table class="zebra-striped">
  ...
</table>

Example: Zebra-striped 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
<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script >
  $(function() {
    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
  });
</script>
<table class="zebra-striped">
  ...
</table>