Shortcodes: Boxes & Tables

Table with Predefined Colors

Table: Striped Rows

Table: Bordered

Table: Hover Rows

Contextual classes

Use contextual classes to color table rows or individual cells.

• .active – Applies the hover color to a particular row or cell
• .success – Indicates a successful or positive action
• .warning – Indicates a warning that might need attention
• .danger – Indicates a dangerous or potentially negative action

Other table colors:

Predefined colors:
table-default, table-primary, table-success, table-warning, table-danger, table-info, table-pink, table-teal, table-orange, table-purple, table-brown, table-black

[table class="table-danger"]
    

         

            

               
Browser
               
Version
               
CSS Grade
               
Platform
            
         
         

             

                
Firefox
                
6.0.2
                
AAA
                
Win XP
             
             

                
Internet Explorer
                
8
                
C
                
Win Vista
             
             

                
Chrome
                
5
                
BB
                
Win 7
             
             

                
Safari
                
5
                
AA
                
Win 7
             
         
     
[/table]

Styled Boxes

While not always necessary, sometimes you need to put your CONTENT in a box. For those situations, try the Box shortcode.

Basic example

Box with heading

Box with footer

Color versions:

Can be combined with icons

[styled_box title="orange" icon="" footer="" class="panel-orange"]Box content[/styled_box]

[styled _box] colors: orange (default), pink, brown, violet, turquoise, green, blue, dark, purple, brown, cyan