Tables are used to display information in an organized way, generally from a dataset. Use tables for tabular data.
Basic Table
Basic Tables have a default style which includes:
- Center Alignment
- Row Dividers in “Lighter” Grey
- White Background
Table Head styling:
- Text is 18 px HK Grotesk Medium. Check typography for more information.
- The row divider is 2 px “Lighter” Grey.
| Name | Favorite Color | Favorite Number |
|---|---|---|
| Sharkira | Pink | 3 |
| Gillfunkel | Purple | 72 |
| Swim shady | Yellow | 10000 |
Borderless Table
Borderless tables do not have any borders :)
| Name | Favorite Color | Favorite Number |
|---|---|---|
| Sharkira | Pink | 3 |
| Gillfunkel | Purple | 72 |
| Swim shady | Yellow | 10000 |
Zebra Table
A zebra table is a borderless table with the ligher shade of grey (#EBEEF2). Check out Colors for more information on the color palette.
| Name | Favorite Color | Favorite Number |
|---|---|---|
| Sharkira | Pink | 3 |
| Gillfunkel | Purple | 72 |
| Swim shady | Yellow | 10000 |
Table Visual Style
Table Spacing
- Elements should have 40 px spacing between them.
- First row (table head) has a height of 56 px.
- All following rows have heights of 52 px.