1. Components
  2. Tables

Tables

Tailwind CSS Tables

Choose the best Tailwind CSS table for responsive, grid-like data display. Easily customise it with search, pagination, action buttons and more.

Basic usage

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

Accented tables

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

Table borders

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-xs

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

Anatomy

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.

List of users
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

Responsive tables

Overflow

Larger tables or tables that cannot be constrained easily should make use of horizontal scroll.

Name Title Age Email 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.

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