---
title: Tables
---
## Tables
---
#### Basic Table
In order to achieve the basic styling example add the base class `.table` to any `
` element.
**Example**
![Basic Table](https://github.com/TroyB12/Pictures/blob/master/Basic%20Table.PNG)
---
#### Table Head
You can define separate header section in your table structure.
This is example
```html
# |
First |
Last |
Handle |
1 |
Bob |
Robo |
@bro |
```
#### Table Striped
In order to achieve the striped row effect (zebra-striping) in tables use `.table-striped` in addition to `.table` on any `` element. Striped tables are styled via the `:nth-child` CSS selector, which is not available in Internet Explorer 8.
![Striped Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Striped.PNG)
---
#### Table Bordered
In order to achieve the bordered table use `.table-bordered` in addition to `.table` on any `` element.
![Bordered Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Bordered.PNG)
---
#### Table Hover
In order to achieve the hover row effect on tables, use `.table-bordered` in addition to `.table` on any `` element.
![Hover Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Hover.PNG)
---
#### Table Condensed
In order to achieve the condensed table use `.table-condensed` in addition to `.table` on any `` element.
![Condensed Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Condensed.PNG)
---
#### Table Responsive
In order to achieve the responsive table by wrapping any `.table` table in a `.table-responsive` element.
![Responsive Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Responsive.PNG)
---
Developers are able to change the style of each individual row and/or cell by using **contextual classes**.
- `.active` - Applies the hover color to a particular row or cell
- `.success` - Indicates a successful or positive action
- `.info` - Indicates a neutral informative change or action
- `.warning` - Indicates a warning that might need attention
- `.danger` - Indicates a dangerous or potentially negative action
...
...
...
...
...
... |
... |
... |
... |
... |
![Contextual Class Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Contextual%20Classes.PNG)
---