1. Tables
  2. Tables

Components

Tailwind CSS Tables

Documentation and examples of tables using Tailwind CSS.

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 Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

Accented tables

Striped rows

Add zebra-striping to any table row.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

Hoverable rows

Add hover-state on table row.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

These hoverable rows can also be combined with the striped variant:

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

Highlighted tables

Highlight a table row or cell.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

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 Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

Tables without borders

A table without borders.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

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 Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

Table thead horizontally divided

Header titles horizontally divided.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

Header in gray color

<thead>'s appearance in gray.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

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 Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

Anatomy

Headless

A table can render without a table header if no thead is supplied.

John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

Table foot

Examples of <tfoot>

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Footer 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 Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete

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 Delete
Jim Green Forward Response Developer jim@site.com 27 London No. 1 Lake Park Delete
Joe Black Product Directives Officer joe@site.com 31 Sidney No. 1 Lake Park Delete

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 Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

Search input

Search is used for making dropdown items searchable.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

With pagination

Example with pagination.

Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

Table with <div>

Use the table, .table-row, .table-cell, .table-caption, .table-column, .table-column-group, .table-header-group, table-row-group, and .table-footer-group utilities 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