#### Tables - Styling

Statistics Invoices Schedule

##### Default styling

Example of a table with default styling. By default any table with `.table` class has `transparent` background color and grey border color. Table header and table footer have the same styling: transparent background, semibold font weight, darker horizontal border and the same height as table body cells.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank
# | First Name | Last Name | Username

##### Table header styling

Example of a custom table `header` styling. Table header supports default contextual and custom background colors available in custom color system. To use custom color in the table header, add `.bg-*` class to the header row. All border and text colors will be automatically adjusted.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Table footer styling

Example of a custom table `footer` styling. Table footer supports custom background colors available in custom color system. To use custom color in the table footer, add `.bg-*` class to the footer row. All border and text colors will be autocatically adjusted.

1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank
# | First Name | Last Name | Username
--- | --- | --- | ---

##### Contextual classes

Example of contextual classes for table `rows`. Contextual classes are used to color table rows or individual cells. These classes come with Bootstrap by default and have much lighter colors than in custom template colors.

# | Product | Payment Taken | Status
--- | --- | --- | ---
1 | TB - Monthly | 01/04/2012 | Approved
1 | TB - Monthly | 01/04/2012 | Approved
2 | TB - Monthly | 02/04/2012 | Declined
2 | TB - Monthly | 02/04/2012 | Declined
3 | TB - Monthly | 03/04/2012 | Pending
3 | TB - Monthly | 03/04/2012 | Pending
4 | TB - Monthly | 04/04/2012 | Call in to confirm
4 | TB - Monthly | 04/04/2012 | Call in to confirm
4 | TB - Monthly | 05/04/2012 | Information
4 | TB - Monthly | 05/04/2012 | Information

##### Custom row colors

Example of `custom colors` for table rows. Add one of the custom colors from the template color system to any table row for additional highlighting. Unlike contextual classes, these colors are much stronger. View all available colors here →.

# | Product | Payment Taken | Status
--- | --- | --- | ---
1 | TB - Monthly | 01/04/2012 | Approved
1 | TB - Monthly | 01/04/2012 | Approved
2 | TB - Monthly | 02/04/2012 | Declined
2 | TB - Monthly | 02/04/2012 | Declined
3 | TB - Monthly | 03/04/2012 | Pending
3 | TB - Monthly | 03/04/2012 | Pending
4 | TB - Monthly | 04/04/2012 | Call in to confirm
4 | TB - Monthly | 04/04/2012 | Call in to confirm
4 | TB - Monthly | 05/04/2012 | Information
4 | TB - Monthly | 05/04/2012 | Information

##### Custom table color

Example of a table with custom `background` color. Any table could have different background colors available in custom color system. To use one of these colors add `.bg-*` color class to the table with `.table` class.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Colored table options

Table with custom background color supports all default table layouts and options. In this example our table displays all possible borders, striped rows and changes background color on row hover. All border, row and text colors are adjusted automatically.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Color combination

This example demonstrates `combination` of colors, added to the table and table header. Here we have one general color added to the `<table>` and highlighted table header with another color added to the header `row`. Body and footer rows are also support this option.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

###### Inside colored panel

Example of a basic table placed inside the panel with custom background color. This panel doesn't have any color classes and automatically inherits border and text colors from the colored panel styles. Color combination are also supported.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank