WoodPecker Logo
WoodPecker Logo

Tables

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor

Shortcodes
Accordions Alerts Animations Audio Unique Blockquotes Breadcrumbs Buttons Cards Extensive Clients Carousel Code Timers Useful Counters Cicle Counters Comments Dropdown Drop Caps Forms Extensive Flip Boxes Headings Infobox Jumbotron Hovers Unique Lightbox Google Maps Pagination Parallax Unique Progress Bars Transitions Sections Scroll Animate Social Sharing Smooth Scroll Scroll Top Tables Typing Text Video Player Widgets

Tables Fully Managed With Bootstrap Varibales®

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

<table class = "table">
    <thead>
    <tr>
        <th scope = "col">#</th>
        <th scope = "col">First</th>
        <th scope = "col">Last</th>
        <th scope = "col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope = "row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope = "row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope = "row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */

Dark Version By Inverting Colors

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
                                
<table class = "table table-dark">
    <thead>
    <tr>
        <th scope = "col">#</th>
        <th scope = "col">First</th>
        <th scope = "col">Last</th>
        <th scope = "col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope = "row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope = "row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope = "row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */

Options For Table Head

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
                                
<table class = "table">
    <thead class = "thead-dark">
    <tr>
        <th scope = "col">#</th>
        <th scope = "col">First</th>
        <th scope = "col">Last</th>
        <th scope = "col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope = "row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope = "row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope = "row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<table class = "table">
    <thead class = "thead-light">
    <tr>
        <th scope = "col">#</th>
        <th scope = "col">First</th>
        <th scope = "col">Last</th>
        <th scope = "col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope = "row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope = "row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope = "row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
                                
<table class = "table table-striped">
    <thead>
    <tr>
        <th scope = "col">#</th>
        <th scope = "col">First</th>
        <th scope = "col">Last</th>
        <th scope = "col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope = "row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope = "row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope = "row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
                            
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
                                
<table class = "table table-bordered">
    <thead>
    <tr>
        <th scope = "col">#</th>
        <th scope = "col">First</th>
        <th scope = "col">Last</th>
        <th scope = "col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope = "row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope = "row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope = "row">3</th>
        <td colspan = "2">Larry the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */

Hoverable Rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
                                
<table class="table table-hover">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */

Contextual classes

Use contextual classes to color table rows or individual cells..

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
                                
<table class="table">
    <thead>
    <tr>
        <th scope="col">Class</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
    </tr>
    </thead>
    <tbody>
    <tr class="table-active">
        <th scope="row">Active</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <th scope="row">Default</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>


    <tr class="table-primary">
        <th scope="row">Primary</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-secondary">
        <th scope="row">Secondary</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-success">
        <th scope="row">Success</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-danger">
        <th scope="row">Danger</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-warning">
        <th scope="row">Warning</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-info">
        <th scope="row">Info</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-light">
        <th scope="row">Light</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr class="table-dark">
        <th scope="row">Dark</th>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    </tbody>
</table>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */
© 2019 WoodPecker® HTML Template. All Rights Reserved