Tailwind CSS Table - Flowbite

The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.

Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.

Default table #

Use the following example of a responsive table component to show multiple rows and columns of text data.

Highlight #

Accentuate certain elements inside the table such as the rows, columns or data cells based on your needs.

Striped rows #

Use this example to increase the readability of the data sets by alternating the background color of every second table row.

Striped columns #

Use this example to increase the readability of the table cells by alternating the background color of every second table column.

Hover state #

Use the hover:{bg-*} utility class from Tailwind CSS to change the background color of a data row when hovering over the element with the cursor.

Table layout #

Use the following examples of table layouts to show the head, foot or caption of the table.

Table head (sortable) #

This example can be used to show the head of the table component with sortable icons.

Table foot #

Use this example where the <tfoot> HTML element can be used in conjunction with the head and caption of the table component.

Table caption #

Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.

Table styles #

Get started with the following table styles and choose the one that best fits your application.

Without border #

Use this example of a table component without any border between the table cells.

Table with shadow #

Use this example to apply a shadow-sm border to the table component.

Overflow scrolling #

Use this example where we apply overflow-x-auto to enable horizontal scrolling if the content inside the table overflows that maximum width.

Table search #

Use this example to show a search bar that can be used to query through data inside the table component.

Table filter #

Use this example with a filter bar to select certain data sets inside the table based on the options that you’ve selected.

Table pagination #

Paginate the table data when using larger data sets based on any given amount of results per page.

Checkbox selection #

Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.

Table with users #

Use this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.

Edit on GitHub

Toggle full view

Toggle full screen

Toggle tablet view

Toggle tablet view

Toggle mobile view

Toggle mobile view

RTL

Toggle RTL mode

Toggle dark/light mode

Toggle dark mode

Loading...

• HTML

Copy

Copy to clipboard

Action

• Reward
• Promote
• Archive
• Delete

Search

Table checkbox	Name	Position	Status	Action
Table checkbox	Neil Sims neil.sims@flowbite.com	React Developer	Online	Edit user
Table checkbox	Bonnie Green bonnie@flowbite.com	Designer	Online	Edit user
Table checkbox	Jese Leos jese@flowbite.com	Vue JS Developer	Online	Edit user
Table checkbox	Thomas Lean thames@flowbite.com	UI/UX Engineer	Online	Edit user
Table checkbox	Leslie Livingston leslie@flowbite.com	SEO Specialist	Offline	Edit user

<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default"> <div class="flex items-center justify-between flex-column flex-wrap md:flex-row space-y-4 md:space-y-0 p-4"> <div> <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button"> Action <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg> </button> <!-- Dropdown menu --> <div id="dropdown" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32"> <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton"> <li> <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Reward</a> </li> <li> <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Promote</a> </li> <li> <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Archive</a> </li> <li> <a href="#" class="inline-flex items-center w-full p-2 text-fg-danger hover:bg-neutral-tertiary-medium rounded">Delete</a> </li> </ul> </div> </div> <label for="input-group-1" class="sr-only">Search</label> <div class="relative"> <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/></svg> </div> <input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="Search"> </div> </div> <table class="w-full text-sm text-left rtl:text-right text-body"> <thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium"> <tr> <th scope="col" class="p-4"> <div class="flex items-center"> <input id="table-checkbox-45" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-45" class="sr-only">Table checkbox</label> </div> </th> <th scope="col" class="px-6 py-3 font-medium"> Name </th> <th scope="col" class="px-6 py-3 font-medium"> Position </th> <th scope="col" class="px-6 py-3 font-medium"> Status </th> <th scope="col" class="px-6 py-3 font-medium"> Action </th> </tr> </thead> <tbody> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-46" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-46" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Neil Sims</div> <div class="font-normal text-body">neil.sims@flowbite.com</div> </div> </th> <td class="px-6 py-4"> React Developer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-47" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-47" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Bonnie Green</div> <div class="font-normal text-body">bonnie@flowbite.com</div> </div> </th> <td class="px-6 py-4"> Designer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-danger me-2"></div> Online </div> </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-48" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-48" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Jese Leos</div> <div class="font-normal text-body">jese@flowbite.com</div> </div> </th> <td class="px-6 py-4"> Vue JS Developer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-49" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-49" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Thomas Lean</div> <div class="font-normal text-body">thames@flowbite.com</div> </div> </th> <td class="px-6 py-4"> UI/UX Engineer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-50" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-50" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Leslie Livingston</div> <div class="font-normal text-body">leslie@flowbite.com</div> </div> </th> <td class="px-6 py-4"> SEO Specialist </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-danger me-2"></div> Offline </div> </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> </tbody> </table> </div>

Expand code

Table with products #

Get started with this example to show a list of products inside the table and show a preview image, product name, quantity selector, price and actions tab.

Edit on GitHub

Toggle full view

Toggle full screen

Toggle tablet view

Toggle tablet view

Toggle mobile view

Toggle mobile view

RTL

Toggle RTL mode

Toggle dark/light mode

Toggle dark mode

Loading...

• HTML

Copy

Copy to clipboard

Image	Product	Qty	Price	Action
	Apple Watch	Choose quantity:	$599	Remove
	iMac 27"	Choose quantity:	$2499	Remove
	IPhone 12	Choose quantity:	$999	Remove

<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default"> <table class="w-full text-sm text-left rtl:text-right text-body"> <thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium"> <tr> <th scope="col" class="px-16 py-3"> <span class="sr-only">Image</span> </th> <th scope="col" class="px-6 py-3 font-medium"> Product </th> <th scope="col" class="px-6 py-3 font-medium"> Qty </th> <th scope="col" class="px-6 py-3 font-medium"> Price </th> <th scope="col" class="px-6 py-3 font-medium"> Action </th> </tr> </thead> <tbody> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="p-4"> <img src="/docs/images/products/apple-watch.png" class="w-16 md:w-24 max-w-full max-h-full" alt="Apple Watch"> </td> <td class="px-6 py-4 font-semibold text-heading"> Apple Watch </td> <td class="px-6 py-4"> <form class="max-w-xs mx-auto"> <label for="counter-input-1" class="sr-only">Choose quantity:</label> <div class="relative flex items-center"> <button type="button" id="decrement-button-1" data-input-counter-decrement="counter-input-1" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6"> <svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg> </button> <input type="text" id="counter-input-1" data-input-counter class="shrink-0 text-heading border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required /> <button type="button" id="increment-button-1" data-input-counter-increment="counter-input-1" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6"> <svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/></svg> </button> </div> </form> </td> <td class="px-6 py-4 font-semibold text-heading"> $599 </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-danger hover:underline">Remove</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="p-4"> <img src="/docs/images/products/imac.png" class="w-16 md:w-24 max-w-full max-h-full" alt="Apple iMac"> </td> <td class="px-6 py-4 font-semibold text-heading"> iMac 27" </td> <td class="px-6 py-4"> <form class="max-w-xs mx-auto"> <label for="counter-input-2" class="sr-only">Choose quantity:</label> <div class="relative flex items-center"> <button type="button" id="decrement-button-2" data-input-counter-decrement="counter-input-2" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6"> <svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg> </button> <input type="text" id="counter-input-2" data-input-counter class="shrink-0 text-heading border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required /> <button type="button" id="increment-button-2" data-input-counter-increment="counter-input-2" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6"> <svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/></svg> </button> </div> </form> </td> <td class="px-6 py-4 font-semibold text-heading"> $2499 </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-danger hover:underline">Remove</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="p-4"> <img src="/docs/images/products/iphone-12.png" class="w-16 md:w-24 max-w-full max-h-full" alt="iPhone 12"> </td> <td class="px-6 py-4 font-semibold text-heading"> IPhone 12 </td> <td class="px-6 py-4"> <form class="max-w-xs mx-auto"> <label for="counter-input-3" class="sr-only">Choose quantity:</label> <div class="relative flex items-center"> <button type="button" id="decrement-button-3" data-input-counter-decrement="counter-input-3" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6"> <svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg> </button> <input type="text" id="counter-input-3" data-input-counter class="shrink-0 text-heading border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required /> <button type="button" id="increment-button-3" data-input-counter-increment="counter-input-3" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6"> <svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/></svg> </button> </div> </form> </td> <td class="px-6 py-4 font-semibold text-heading"> $999 </td> <td class="px-6 py-4"> <a href="#" class="font-medium text-fg-danger hover:underline">Remove</a> </td> </tr> </tbody> </table> </div>

Expand code

Table with modal #

Use this example to show a modal with a form where you can edit table data by clicking on one of the rows.

Edit on GitHub

Toggle full view

Toggle full screen

Toggle tablet view

Toggle tablet view

Toggle mobile view

Toggle mobile view

RTL

Toggle RTL mode

Toggle dark/light mode

Toggle dark mode

Loading...

• HTML

Copy

Copy to clipboard

Action

• Reward
• Promote
• Archive
• Delete

Search

Table checkbox	Name	Position	Status	Action
Table checkbox	Neil Sims neil.sims@flowbite.com	React Developer	Online	Edit user
Table checkbox	Bonnie Green bonnie@flowbite.com	Designer	Online	Edit user
Table checkbox	Jese Leos jese@flowbite.com	Vue JS Developer	Online	Edit user
Table checkbox	Thomas Lean thomas@flowbite.com	UI/UX Engineer	Online	Edit user
Table checkbox	Leslie Livingston leslie@flowbite.com	SEO Specialist	Offline	Edit user

Create new product

Close modal

Name

Position

Status Online Offline Archived

Biography

Update user Cancel

<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default"> <div class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 p-4"> <div> <button id="dropdownDefaultButton2" data-dropdown-toggle="dropdown-2" class="inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button"> Action <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg> </button> <!-- Dropdown menu --> <div id="dropdown-2" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32"> <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton2"> <li> <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Reward</a> </li> <li> <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Promote</a> </li> <li> <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Archive</a> </li> <li> <a href="#" class="inline-flex items-center w-full p-2 text-fg-danger hover:bg-neutral-tertiary-medium rounded">Delete</a> </li> </ul> </div> </div> <label for="input-group-1" class="sr-only">Search</label> <div class="relative"> <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/></svg> </div> <input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="Search"> </div> </div> <table class="w-full text-sm text-left rtl:text-right text-body"> <thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium"> <tr> <th scope="col" class="p-4"> <div class="flex items-center"> <input id="table-checkbox-51" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-51" class="sr-only">Table checkbox</label> </div> </th> <th scope="col" class="px-6 py-3 font-medium"> Name </th> <th scope="col" class="px-6 py-3 font-medium"> Position </th> <th scope="col" class="px-6 py-3 font-medium"> Status </th> <th scope="col" class="px-6 py-3 font-medium"> Action </th> </tr> </thead> <tbody> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-52" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-52" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Neil Sims</div> <div class="font-normal text-body">neil.sims@flowbite.com</div> </div> </th> <td class="px-6 py-4"> React Developer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <!-- Modal toggle --> <a href="#" type="button" data-modal-target="editUserModal" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-53" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-53" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Bonnie Green</div> <div class="font-normal text-body">bonnie@flowbite.com</div> </div> </th> <td class="px-6 py-4"> Designer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <!-- Modal toggle --> <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-54" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-54" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Jese Leos</div> <div class="font-normal text-body">jese@flowbite.com</div> </div> </th> <td class="px-6 py-4"> Vue JS Developer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <!-- Modal toggle --> <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-55" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-55" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Thomas Lean</div> <div class="font-normal text-body">thomas@flowbite.com</div> </div> </th> <td class="px-6 py-4"> UI/UX Engineer </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online </div> </td> <td class="px-6 py-4"> <!-- Modal toggle --> <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> <tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium"> <td class="w-4 p-4"> <div class="flex items-center"> <input id="table-checkbox-56" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft"> <label for="table-checkbox-56" class="sr-only">Table checkbox</label> </div> </td> <th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap"> <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Jese image"> <div class="ps-3"> <div class="text-base font-semibold">Leslie Livingston</div> <div class="font-normal text-body">leslie@flowbite.com</div> </div> </th> <td class="px-6 py-4"> SEO Specialist </td> <td class="px-6 py-4"> <div class="flex items-center"> <div class="h-2.5 w-2.5 rounded-full bg-danger me-2"></div> Offline </div> </td> <td class="px-6 py-4"> <!-- Modal toggle --> <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a> </td> </tr> </tbody> </table> <!-- Main modal --> <div id="editUserModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> <div class="relative p-4 w-full max-w-md max-h-full"> <!-- Modal content --> <div class="relative bg-neutral-primary-soft border border-default rounded-base shadow-sm p-4 md:p-6"> <!-- Modal header --> <div class="flex items-center justify-between border-b border-default pb-4 md:pb-5"> <h3 class="text-lg font-medium text-heading"> Create new product </h3> <button type="button" class="text-body bg-transparent hover:bg-neutral-tertiary hover:text-heading rounded-base text-sm w-9 h-9 ms-auto inline-flex justify-center items-center" data-modal-hide="editUserModal"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg> <span class="sr-only">Close modal</span> </button> </div> <!-- Modal body --> <form action="#"> <div class="grid gap-4 grid-cols-2 py-4 md:py-6"> <div class="col-span-2"> <label for="name" class="block mb-2.5 text-sm font-medium text-heading">Name</label> <input type="text" name="name" id="name" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="Bonnie Green" required=""> </div> <div class="col-span-2 sm:col-span-1"> <label for="position" class="block mb-2.5 text-sm font-medium text-heading">Position</label> <input type="text" name="position" id="position" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="React Developer" required=""> </div> <div class="col-span-2 sm:col-span-1"> <label for="category" class="block mb-2.5 text-sm font-medium text-heading">Status</label> <select id="category" class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs placeholder:text-body"> <option selected="">Online</option> <option value="offline">Offline</option> <option value="archived">Archived</option> </select> </div> <div class="col-span-2"> <label for="biography" class="block mb-2.5 text-sm font-medium text-heading">Biography</label> <textarea id="biography" rows="4" class="block bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" placeholder="Write a short biography here"></textarea> </div> </div> <div class="flex items-center space-x-4 border-t border-default pt-4 md:pt-6"> <button type="submit" class="inline-flex items-center text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none"> Update user </button> <button data-modal-hide="crud-modal" type="button" class="text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Cancel</button> </div> </form> </div> </div> </div> </div>

Expand code

Table colors #

Apply any color to the table element by using the bg-{color} and text-{color} color class variants from Tailwind CSS.

Striped rows color #

Use this example to apply a different color to every second row inside the table.

Striped columns color #

Use this example to apply a different color to every second column inside a colored table.

Hover state #

Use this example to apply a different color to every second row inside the table with a colored background.

More examples #

You can check out more table component examples from the following resources from Flowbite Blocks:

• Advanced tables
• Table headers
• Table footers
• Pricing tables