#### Light Blue

## Static Tables Different variations

#### Varius content

# | Picture | Description | Info | Date | Size |
--- | --- | --- | --- | --- | --- | ---
1 |  | Palo Alto | Type: JPEG Dimensions: 200x150 | September 14, 2012 | 45.6 KB |
2 |  | The Sky | Type: PSD Dimensions: 2400x1455 | November 14, 2012 | 15.3 MB |
3 |  | Down the road | Type: JPEG Dimensions: 200x150 | September 14, 2012 | 49.0 KB |
4 |  | The Edge | Type: PNG Dimensions: 210x160 | September 15, 2012 | 69.1 KB |
5 |  | Fortress | Type: JPEG Dimensions: 1452x1320 | October 1, 2012 | 2.3 MB |

- Prev
- 1
- 2
- 3
- 4
- Next

#### Simple table

# | First Name | Last Name | Email | Status
--- | --- | --- | --- | ---
1 | Mark | Otto | ottoto@example.com | New
2 | Jacob | Thornton | fat.thor@example.com | Unconfirmed
3 | Larry | the Bird | larry@example.com | Pending
4 | Peter | Horadnia | peter@example.com | Active

> No distraction. Perfect. Just add `.table` class.

#### Stripped one

# | First Name | Last Name | Email | Status
--- | --- | --- | --- | ---
1 | Mark | Otto | ottoto@example.com | New
2 | Jacob | Thornton | fat.thor@example.com | Pending
3 | Larry | the Bird | larry@example.com | Unconfirmed
4 | Peter | Horadnia | peter@example.com | New

> Each row highlighted. You'll never lost. `.table-srtiped` it.

#### Color the table

# | First Name | Last Name | Email | Status
--- | --- | --- | --- | ---
1 | Mark | Otto | ottoto@example.com | Active
2 | Jacob | Thornton | fat.thor@example.com | Unconfirmed
3 | Larry | the Bird | larry@example.com | New
4 | Peter | Horadnia | peter@example.com | Pending

> Each row is unique. `.table-colored` is specially for it.

#### Condensed table

# | First Name | Last Name | Email | Status
--- | --- | --- | --- | ---
1 | Mark | Otto | ottoto@example.com | New
2 | Jacob | Thornton | fat.thor@example.com | Active
3 | Larry | the Bird | larry@example.com | New
4 | Peter | Horadnia | peter@example.com | Unconfirmed

> Fits to any size. `.table-condensed` to decrease padding.

#### Bordered table

# | First Name | Last Name | Email | Status
--- | --- | --- | --- | ---
1 | Mark | Otto | test@example.com | Unconfirmed
ototo@example.com | Active
2 | Jacob | Thornton | jacob@example.com | New
3 | Larry the Bird | larry@example.com | Pending

> Merge similar. Just ad `.table-bordered` class.

#### On hover

# | First Name | Last Name | Email | Status
--- | --- | --- | --- | ---
1 | Mark | Otto | ottoto@example.com | Pending
2 | Jacob | Thornton | fat.thor@example.com | Unconfirmed
3 | Larry | the Bird | larry@example.com | New
4 | Peter | Horadnia | peter@example.com | Active

> Trace only what's really important. `.table-hover` is made for it.