- Components
- Tables
Tables
Tailwind CSS Tables
Documentation and examples of tables using Tailwind CSS.
Example
Using the most basic table markup, here's how tables look.
All the examples are responsive - tables allow tables to be scrolled horizontally with ease.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Striped rows
Add zebra-striping to any table row.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park | |
| Edward King | 16 | LA No. 1 Lake Park | |
| Jim Red | 45 | Melbourne No. 1 Lake Park |
Hoverable rows
Add hover-state on table row.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park | |
| Edward King | 16 | LA No. 1 Lake Park | |
| Jim Red | 45 | Melbourne No. 1 Lake Park |
These hoverable rows can also be combined with the striped variant:
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park | |
| Edward King | 16 | LA No. 1 Lake Park | |
| Jim Red | 45 | Melbourne No. 1 Lake Park |
Highlighted tables
Highlight a table row or cell.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Bordered tables
Add border on all sides of the table and cells.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Tables without borders
A table without borders.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Rounded tables
Use the border radius utility classes to make tables more rounded.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Thead vertically divided
Header titles vertically divided.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Header in gray color
<thead>'s appearance in gray.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
With shadow
Use the shadow utility classes to make tables more rounded.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Headless
A table can render without a table header if no thead is supplied.
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Table foot
Examples of <tfoot>
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Footer | Footer | Footer |
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.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park | |
| Jim Green | 27 | London No. 1 Lake Park | |
| Joe Black | 31 | Sidney No. 1 Lake Park |
Overflow
Larger tables or tables that cannot be constrained easily should make use of horizontal scroll.
| Name | Title | Age | Address | Action | |
|---|---|---|---|---|---|
| John Brown | Regional Paradigm Technician | john@site.com | 45 | New York No. 1 Lake Park | |
| Jim Green | Forward Response Developer | jim@site.com | 27 | London No. 1 Lake Park | |
| Joe Black | Product Directives Officer | joe@site.com | 31 | Sidney No. 1 Lake Park |
Selection
Rows can be selectable by making first column as a selectable column.
|
|
Name | Age | Address | Action |
|---|---|---|---|---|
|
|
John Brown | 45 | New York No. 1 Lake Park | |
|
|
Jim Green | 27 | London No. 1 Lake Park | |
|
|
Joe Black | 31 | Sidney No. 1 Lake Park | |
|
|
Edward King | 16 | LA No. 1 Lake Park | |
|
|
Jim Red | 45 | Melbourne No. 1 Lake Park |
Search input
Search is used for making dropdown items searchable.
|
|
Name | Age | Address | Action |
|---|---|---|---|---|
|
|
John Brown | 45 | New York No. 1 Lake Park | |
|
|
Jim Green | 27 | London No. 1 Lake Park | |
|
|
Joe Black | 31 | Sidney No. 1 Lake Park | |
|
|
Edward King | 16 | LA No. 1 Lake Park | |
|
|
Jim Red | 45 | Melbourne No. 1 Lake Park |
With pagination
Example with pagination.
|
|
Name | Age | Address | Action |
|---|---|---|---|---|
|
|
John Brown | 45 | New York No. 1 Lake Park | |
|
|
Jim Green | 27 | London No. 1 Lake Park | |
|
|
Joe Black | 31 | Sidney No. 1 Lake Park | |
|
|
Edward King | 16 | LA No. 1 Lake Park | |
|
|
Jim Red | 45 | Melbourne No. 1 Lake Park |
Table layout using <div> tag
Use the table, .table-row, .table-cell, .table-caption, .table-column, .table-column-group, .table-header-group, table-row-group, and .table-footer-group utility classes to create elements that behave like their respective table elements.
