Tables
Examples for opt-in styling of tables.
Basic example
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| 4 | Jane | Birkins | Support | +3 774 28 50 |
Basic example
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| 4 | Jane | Birkins | Support | +3 774 28 50 |
Striped rows
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
Striped columns
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
Bordered table
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
Hoverable rows
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
Contextual colors
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Primary | Column content | Column content |
| 2 | Secondary | Column content | Column content |
| 3 | Success | Column content | Column content |
| 4 | Info | Column content | Column content |
| 5 | Warning | Column content | Column content |
| 6 | Danger | Column content | Column content |
Color borders
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |