Tables

Spread the love

[vc_column_text width=”1/1″ el_position=”first last”]

Example tables

[/vc_column_text] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

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.

[/vc_column_text] [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”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

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.

[/vc_column_text] [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”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

3. Bordered table

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

[/vc_column_text] [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”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

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).

[/vc_column_text] [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”] [/vc_column] [vc_column width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

5. Combine them all!

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

[/vc_column_text] [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”] [/vc_column]

Translate »