Basic
Using the most basic table markup, here’s how .table-based tables look.
| Name | Title | Role |
|---|---|---|
Cody Fishercody.fisher@example.com |
Product Directives Officer Intranet |
Owner |
Esther Howardesther.howard@example.com |
Forward Response Developer Directives |
Member |
Cameron Williamsoncameron.williamson@example.com |
Internal Applications Engineer Security |
Member |
Bernard Lanebernard.lane@example.com |
Human Resources Director |
Owner |
Dark
Opt into darker tables.
| Name | Title | Role |
|---|---|---|
Cody Fishercody.fisher@example.com |
Product Directives Officer Intranet |
Owner |
Esther Howardesther.howard@example.com |
Forward Response Developer Directives |
Member |
Cameron Williamsoncameron.williamson@example.com |
Internal Applications Engineer Security |
Member |
Bernard Lanebernard.lane@example.com |
Human Resources Director |
Owner |
Striped rows
Add zebra-striping to any table row.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Hoverable rows
Enable a hover state on table rows.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Active tables
Highlight a table row or cell.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Bordered tables
Borders on all sides of the table and cells.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Borderless tables
Table without borders.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Small tables
Make any table more compact by cutting all cell padding in half.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Table head
Make <thead>s appear light or dark gray.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
Table foot
Set of rows summarizing the columns of the table.
| Items | Expenditure |
|---|---|
| Donuts | 3,000 |
| Stationery | 18,000 |
| Totals | 21,000 |
Captions
A caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |
| Browser | Market share |
|---|---|
| Chrome | 63.62% |
| Safari | 19.09% |
| Firefox | 3.77% |
| Edge | 3.42% |