Components
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.

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.

Theme:

<tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Accented tables

Striped rows

Add zebra-striping to any table row.

Theme:

<tr class="odd:bg-layer even:bg-surface">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="odd:bg-layer even:bg-surface">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="odd:bg-layer even:bg-surface">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Edward King</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">16</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">LA No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="odd:bg-layer even:bg-surface">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Red</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Melbourne No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Hoverable rows

Add hover-state on table row.

Theme:

<tr class="hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Edward King</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">16</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">LA No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Red</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Melbourne No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

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

Theme:

<tr class="odd:bg-layer even:bg-surface hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="odd:bg-layer even:bg-surface hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="odd:bg-layer even:bg-surface hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Edward King</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">16</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">LA No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr class="odd:bg-layer even:bg-surface hover:bg-muted-hover">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Red</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Melbourne No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Highlighted tables

Highlight a table row or cell.

Theme:

<tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="bg-orange-100 dark:bg-orange-500/20 px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="bg-red-100 dark:bg-red-500/20 px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="bg-primary-100 dark:bg-primary-500/20 px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="bg-primary-100 dark:bg-primary-500/20 px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Table borders

Bordered tables

Add border on all sides of the table and cells.

Theme:

<div class="min-w-full">
                        <div class="border border-table-line overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <table class="min-w-full divide-y divide-table-line">
                            <thead>
                              <tr>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</th>
                                <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</th>
                              </tr>
                            </thead>
                            <tbody class="divide-y divide-table-line">
                              <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

Tables without borders

A table without borders.

Theme:

Rounded tables

Use the border radius utility classes to make tables more rounded.

Theme:

Thead vertically divided

Header titles vertically divided.

Theme:

Header in gray color

<thead>'s appearance in gray.

Theme:

With shadow-xs

Use the shadow utility classes to make tables more rounded.

Theme:

<div class="min-w-full">
                        <div class="border border-table-line rounded-lg shadow-xs overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <table class="min-w-full divide-y divide-table-line">
                            <thead class="bg-muted">
                              <tr>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</th>
                                <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</th>
                              </tr>
                            </thead>
                            <tbody class="divide-y divide-table-line">
                              <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

Anatomy

Headless

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

Theme:

Table foot

Examples of <tfoot>

Theme:

<tfoot>
                              <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Footer</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Footer</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Footer</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Footer</button>
                                </td>
                              </tr>
                            </tfoot>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

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.

Theme:

Responsive tables

Overflow

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

Theme:

<tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Forward Response Developer</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">jim@site.com</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Product Directives Officer</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">joe@site.com</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Selection

Rows can be selectable by making first column as a selectable column.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body>
                      <div class="min-w-full">
                        <div class="border border-table-line rounded-lg overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <table class="min-w-full divide-y divide-table-line">
                            <thead class="bg-muted">
                              <tr>
                                <th scope="col" class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-all" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-all" class="sr-only">Checkbox</label>
                                  </div>
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</th>
                                <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</th>
                              </tr>
                            </thead>
                            <tbody class="divide-y divide-table-line">
                              <tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-1" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-1" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-2" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-2" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-3" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-3" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-4" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-4" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Edward King</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">16</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">LA No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-5" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-5" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Red</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Melbourne No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="min-w-full">
                        <div class="border border-table-line rounded-lg overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <table class="min-w-full divide-y divide-table-line">
                            <thead class="bg-muted">
                              <tr>
                                <th scope="col" class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-all" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-all" class="sr-only">Checkbox</label>
                                  </div>
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</th>
                                <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</th>
                              </tr>
                            </thead>
                            <tbody class="divide-y divide-table-line">
                              <tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-checkbox-1" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-checkbox-1" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

Search input

Search is used for making dropdown items searchable.

Theme:

<table class="min-w-full divide-y divide-table-line">
                            <thead class="bg-muted">
                              <tr>
                                <th scope="col" class="py-3 px-4 pe-0">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-search-checkbox-all" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-search-checkbox-all" class="sr-only">Checkbox</label>
                                  </div>
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</th>
                                <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</th>
                              </tr>
                            </thead>
                            <tbody class="divide-y divide-table-line">
                              <tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-search-checkbox-1" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-search-checkbox-1" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-search-checkbox-2" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-search-checkbox-2" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-search-checkbox-3" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-search-checkbox-3" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">31</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-search-checkbox-4" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-search-checkbox-4" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Edward King</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">16</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">LA No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>

<tr>
                                <td class="py-3 ps-4">
                                  <div class="flex items-center h-5">
                                    <input id="hs-table-search-checkbox-5" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    <label for="hs-table-search-checkbox-5" class="sr-only">Checkbox</label>
                                  </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Red</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-foreground">Melbourne No. 1 Lake Park</td>
                                <td class="px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

With pagination

Example with pagination.

Theme:

<div class="py-1 px-4 border-t border-table-line">
                            <nav class="flex items-center space-x-1" aria-label="Pagination">
                              <button type="button" class="p-2.5 min-w-10 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus rounded-full disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-w-10 flex justify-center items-center py-2.5 text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus rounded-full disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-w-10 flex justify-center items-center py-2.5 text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus rounded-full disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-w-10 flex justify-center items-center py-2.5 text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus rounded-full disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <button type="button" class="p-2.5 min-w-10 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus rounded-full disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <span aria-hidden="true">»</span>
                              </button>
                            </nav>
                          </div>
                          
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

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.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body>
                      <div class="min-w-full">
                        <div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="table border-collapse table-auto w-full divide-y divide-table-line">
                            <div class="table-header-group">
                              <div class="table-row">
                                <div class="table-cell px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</div>
                                <div class="table-cell px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</div>
                                <div class="table-cell px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</div>
                                <div class="table-cell px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</div>
                              </div>
                            </div>
                            <div class="table-row-group divide-y divide-table-line bg-layer">
                              <div class="table-row">
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">45</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </div>
                              </div>
                              <div class="table-row">
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">27</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </div>
                              </div>
                              <div class="table-row">
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">31</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="min-w-full">
                        <div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="table border-collapse table-auto w-full divide-y divide-table-line">
                            <div class="table-header-group">
                              <div class="table-row">
                                <div class="table-cell px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Name</div>
                                <div class="table-cell px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Age</div>
                                <div class="table-cell px-6 py-3 text-start text-xs font-medium text-muted-foreground-1 uppercase">Address</div>
                                <div class="table-cell px-6 py-3 text-end text-xs font-medium text-muted-foreground-1 uppercase">Action</div>
                              </div>
                            </div>
                            <div class="table-row-group divide-y divide-table-line bg-layer">
                              <div class="table-row">
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">John Brown</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">45</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">New York No. 1 Lake Park</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </div>
                              </div>
                              <div class="table-row">
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Jim Green</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">27</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">London No. 1 Lake Park</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </div>
                              </div>
                              <div class="table-row">
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">Joe Black</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">31</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-sm text-foreground">Sidney No. 1 Lake Park</div>
                                <div class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium">
                                  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">Delete</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

Tailwind CSS Tables

Basic usage

Example

Accented tables

Striped rows

Hoverable rows

Highlighted tables

Table borders

Bordered tables

Tables without borders

Rounded tables

Thead vertically divided

Header in gray color

With shadow-xs

Anatomy

Headless

Table foot

Captions

Responsive tables

Overflow

Selection

Search input

Table layout using <div> tag

On this page