Docs
Tables
Tables

Tailwind CSS Tables

Build responsive Tailwind CSS table components with striped rows, hover states, borders, captions, row selection, search, pagination, and overflow.

Default table

Start with standard table markup for a simple, readable table.

All examples are responsive, and wide tables can scroll horizontally when space is limited.

<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.2.0"></script>
                            </body>
                          </html>

Row accents

Striped rows

Add zebra striping to make rows easier to scan across dense datasets.

<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.2.0"></script>
                            </body>
                          </html>

Hoverable rows

Add a hover state to help users track the row they are about to interact with.

<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.2.0"></script>
                            </body>
                          </html>

Combine hover states with striped rows when you want stronger row separation.

<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.2.0"></script>
                            </body>
                          </html>

Highlighted rows or cells

Highlight specific rows or cells to call attention to important values or statuses.

<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.2.0"></script>
                            </body>
                          </html>

Table borders

Bordered tables

Add borders around the table and individual cells for a more structured grid.

<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

Remove borders for a lighter table style with less visual separation.

Rounded corners

Use border-radius utilities to soften the table container and corners.

Vertically divided header

Add vertical dividers between header cells to separate columns more clearly.

Muted header

Give the <thead> a muted background to distinguish it from the table body.

Table with shadow

Use shadow utilities to add subtle depth around the table.

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

Table anatomy

Without table header

Render a table without a <thead> when the layout does not need column labels.

Table footer

Use <tfoot> for totals, summaries, or other footer rows.

<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.2.0"></script>
                            </body>
                          </html>

Table captions

A <caption> acts like a heading for the table and helps screen reader users understand what the data represents.

Responsive behavior

Horizontal scrolling

Wrap wide tables in horizontal overflow so columns stay readable on smaller screens.

<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.2.0"></script>
                            </body>
                          </html>

Selectable rows

Make the first column selectable to support row selection patterns.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>

Table with search

Add a search field above the table to support filtering UI in table layouts.

<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.2.0"></script>
                            </body>
                          </html>

Table with pagination

Pair the table with pagination controls when rows need to be split across views.

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

Table layout with <div>

Use table display utilities on <div> elements when you need table-like layout without semantic table tags.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>