Example tables

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the.table class is required.

[tt_table table_name=”Default table” table_content=”

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

” width=”2/3″ el_position=”last”]

2. Striped table

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

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

[tt_table table_name=”striped_table” table_content=”

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

” width=”2/3″ el_position=”last”]

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

[tt_table table_name=”bordered_table” table_content=”

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

” width=”2/3″ el_position=”last”]

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

[tt_table table_name=”condensed_table” table_content=”

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

” width=”2/3″ el_position=”last”]

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

[tt_table table_name=”combine_them_all” table_content=”

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

” width=”2/3″ el_position=”last”]

The author didnt add any Information to his profile yet

  • Published: 33 posts