Table Examples

See examples of the various table style options.

Table - Basic

Adds some padding and only horizontal dividers. This table will expand to 100% of it's containing element.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Condensed

A more compact table. It expands to 100% of it's containing element.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Hover

A light shading will appear on any row when the mouse hovers over it. This table will expand to 100% of it's containing element.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Striped

Adds a zebra-striping effect by adding a light shading on every other row. This table will expand to 100% of it's containing element.

Note that this style is not supported by Internet Explorer.
#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke  Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Bordered 

Adds borders on all sides of the table and cells.  Has half the cell padding as the Basic table. It expands to 100% of it's containing element.

#First NameLast NameUsername
1 Darth Vader @anakin
Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Combined Bordered and Hover Table

If you are comfortable editing the HTML you can combine the Bordered Table and Hover Table styles. Simply create a table using the bordered table style. In the HTML you will see the following code that starts the table: <table border="0" class="table table-bordered">. Simply add the table-hover class to the existing list so that the code now looks like this: <table border="0" class="table table-bordered table-hover">

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Invisible Grid

The table will have invisible borders. It expands to acommodate the content it contains.

 

Table - Subdued Grid

The table has some basic padding and borders on alls sides of the table and cells. It expands to accommodate the content it contains.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Fancy Grid Listing

Adds a zebra-striping effect by adding a light shading on every other row. The table will have forced lower-case headers. It expands to accommodate the content it contains.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Fancy Listing

The table will have forced lower-case headers & dashed borders between body rows. It has less padding than the Fancy Grid Listing.  It expands to accommodate the content it contains.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon

 

Table - Fancy Vertical Listing

The table will have forced lower-case headers. It expands to accommodate the content it contains.

#First NameLast NameUsername
1 Darth Vader @anakin
2 Luke Skywalker @jedi
3 Han Solo @mfalcon