Tables
The table element represents tabular data — that is, the information presented in a two-dimensional table comprised of rows and columns of cells containing data.
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
Variations
Simple Table
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Simple Table -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left border border-collapse rounded sm:border-separate border-slate-200" cellspacing="0">
<tbody>
<tr>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Name</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Title</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Company</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Role</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Username</th>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
</div>
<!-- End Simple Table -->Responsive Table
Resize your browser window to the table on small screens.
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Responsive Table -->
<table class="w-full text-left border border-separate rounded border-slate-200" cellspacing="0">
<tbody>
<tr>
<th scope="col" class="hidden h-12 px-6 text-sm font-medium border-l sm:table-cell first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Name</th>
<th scope="col" class="hidden h-12 px-6 text-sm font-medium border-l sm:table-cell first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Title</th>
<th scope="col" class="hidden h-12 px-6 text-sm font-medium border-l sm:table-cell first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Company</th>
<th scope="col" class="hidden h-12 px-6 text-sm font-medium border-l sm:table-cell first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Role</th>
<th scope="col" class="hidden h-12 px-6 text-sm font-medium border-l sm:table-cell first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Username</th>
</tr>
<tr class="block border-b sm:table-row last:border-b-0 border-slate-200 sm:border-none">
<td data-th="Name" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td data-th="Title" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td data-th="Company" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td data-th="Role" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td data-th="Username" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr class="block border-b sm:table-row last:border-b-0 border-slate-200 sm:border-none">
<td data-th="Name" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td data-th="Title" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td data-th="Company" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td data-th="Role" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td data-th="Username" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr class="block border-b sm:table-row last:border-b-0 border-slate-200 sm:border-none">
<td data-th="Name" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td data-th="Title" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td data-th="Company" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td data-th="Role" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td data-th="Username" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr class="block border-b sm:table-row last:border-b-0 border-slate-200 sm:border-none">
<td data-th="Name" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td data-th="Title" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td data-th="Company" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td data-th="Role" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td data-th="Username" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr class="block border-b sm:table-row last:border-b-0 border-slate-200 sm:border-none">
<td data-th="Name" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td data-th="Title" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td data-th="Company" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td data-th="Role" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td data-th="Username" class="before:w-24 before:inline-block before:font-medium before:text-slate-700 before:content-[attr(data-th)':'] sm:before:content-none flex items-center sm:table-cell h-12 px-6 text-sm transition duration-300 sm:border-t sm:border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
<!-- End Responsive Table -->Simple Table with Footer
Copy as:
| No | Product Name | Color | Category | Price |
|---|---|---|---|---|
| 1 | Apple Watch | White | Wearables | $299 |
| 2 | Macbook pro 16" | Silver | Laptops | $2999 |
| 3 | Macbook pro 13" | Space Gray | Laptops | $1999 |
| Total | $5297 | |||
<!-- Component: Simple with footer -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left border border-separate rounded border-slate-200" cellspacing="0">
<tbody>
<tr>
<th scope="col" class="h-12 px-6 text-sm font-medium text-center border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">No</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Product Name</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Color</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Category</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Price</th>
</tr>
<tr>
<th scope="row" class="h-12 px-6 text-sm text-center transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">1</th>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Apple Watch</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">White</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Wearables</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">$299</td>
</tr>
<tr>
<th scope="row" class="h-12 px-6 text-sm text-center transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">2</th>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Macbook pro 16"</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Silver</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Laptops</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">$2999</td>
</tr>
<tr>
<th scope="row" class="h-12 px-6 text-sm text-center transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">3</th>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Macbook pro 13"</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Space Gray</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Laptops</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">$1999</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="h-12 px-6 text-sm font-medium border-t border-l first:border-l-0 stroke-slate-700 text-slate-700" colspan="3"></td>
<td class="h-12 px-6 text-sm font-medium border-t border-l first:border-l-0 stroke-slate-700 text-slate-700 ">Total</td>
<td class="h-12 px-6 text-sm font-medium border-t border-l first:border-l-0 stroke-slate-700 text-slate-700 ">$5297</td>
</tr>
</tfoot>
</table>
</div>
<!-- End Simple with footer -->Striped Table
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Striped Table -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left border border-separate rounded border-slate-200" cellspacing="0">
<tbody>
<tr>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Name</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Title</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Company</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Role</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Username</th>
</tr>
<tr class="odd:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr class="odd:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr class="odd:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr class="odd:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr class="odd:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
</div>
<!-- End Striped Table -->Table with Hover State
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Table with hover state -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left border border-separate rounded border-slate-200" cellspacing="0">
<tbody>
<tr>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Name</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Title</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Company</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Role</th>
<th scope="col" class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Username</th>
</tr>
<tr class="transition-colors duration-300 hover:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr class="transition-colors duration-300 hover:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr class="transition-colors duration-300 hover:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr class="transition-colors duration-300 hover:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr class="transition-colors duration-300 hover:bg-slate-50">
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table with hover state -->Borderless Table
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Borderless Table -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left rounded w-overflow-x-auto " cellspacing="0">
<tbody>
<tr>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 bg-slate-100">Name</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 bg-slate-100">Title</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 bg-slate-100">Company</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 bg-slate-100">Role</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 bg-slate-100">Username</th>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
</div>
<!-- End Borderless Table -->Underline Table
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Underline Table -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left border-collapse rounded w-overflow-x-auto " cellspacing="0">
<tbody>
<tr class="border-b border-slate-300">
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 ">Name</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 ">Title</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 ">Company</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 ">Role</th>
<th scope="col" class="h-12 px-6 text-sm font-medium stroke-slate-700 text-slate-700 ">Username</th>
</tr>
<tr class="border-b border-slate-200">
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr class="border-b border-slate-200">
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr class="border-b border-slate-200">
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr class="border-b border-slate-200">
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr class="border-b border-slate-200">
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-12 px-6 text-sm transition duration-300 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
</div>
<!-- End Underline Table -->Compact Table
Copy as:
| Name | Title | Company | Role | Username |
|---|---|---|---|---|
| Ayub Salas | Designer | Carroll Group | Member | salas_a |
| Agnes Sherman | Developer | Apple | Admin | shermanagnes |
| Jemma Cummings | Senior Designer | 20goto10 | Member | jemmaC |
| Jimi Cardenas | Copywriter | Wind-UI | Owner | cardenasji |
| Mateusz Tucker | Project Manager | Tailwindui | Member | mt |
<!-- Component: Compact Table -->
<div class="w-full overflow-x-auto">
<table class="w-full text-left border border-separate rounded border-slate-200" cellspacing="0">
<tbody>
<tr>
<th scope="col" class="h-10 px-4 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Name</th>
<th scope="col" class="h-10 px-4 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Title</th>
<th scope="col" class="h-10 px-4 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Company</th>
<th scope="col" class="h-10 px-4 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Role</th>
<th scope="col" class="h-10 px-4 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100">Username</th>
</tr>
<tr>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Ayub Salas</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Designer</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Carroll Group</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">salas_a</td>
</tr>
<tr>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Agnes Sherman</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Developer</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Apple</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Admin</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">shermanagnes</td>
</tr>
<tr>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jemma Cummings</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Senior Designer</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">20goto10</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">jemmaC</td>
</tr>
<tr>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Jimi Cardenas</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Copywriter</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Wind-UI</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Owner</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">cardenasji</td>
</tr>
<tr>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Mateusz Tucker</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Project Manager</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Tailwindui</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">Member</td>
<td class="h-10 px-4 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500 ">mt</td>
</tr>
</tbody>
</table>
</div>
<!-- End Compact Table -->Usage
Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data.
Data tables can contain:
- Interactive components (such as chips, buttons, or menus)
- Non-interactive elements (such as badges)
- Tools to query and manipulate data
Specs
A table consists of the following elements
<table>: Defines the table<tbody>: Groups the body content in a table<tr>: Defines rows in a table<th>: Defines a header cell in a table<td>: Defines a cell in a table<tfoot>: Groups the footer content in a table
Tables come in 2 sizes:
- Normal: rows have 3rem height (48px) and 1.5rem (24px) horizontal padding.Compact: rows have 2.5rem height (40px) and 1rem (16px) horizontal padding.
Wrap a table in a <div className="w-full overflow-x-auto"> to make it scroll so that users can view its data on small screens or use the responsive table instead.
Accessibility notes
- Tables with one header and simple data are fairly accessible out of the box and may not need additional accessibility updates. Always use the simplest table configuration possible.
- When your tables get more complex, use the
<th>element to identify the header cells by adding a scope attribute. For header rows use<th scope="row">. For header columns use<th scope="col"> - Add the optional
<caption>element before the table content to give users more information on the table contents.