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.