Dark Table
| Firstname |
Email |
Action |
Mary
|
john@example.com |
|
Moe
|
mary@example.com |
|
Dooley
|
july@example.com |
|
<div class="overflow-auto">
<table class="table-auto mb-0 w-full">
<thead class="border border-border-color">
<tr class="bg-dark text-white">
<th class="px-4 py-2 text-start">Firstname</th>
<th class="px-4 py-2 text-start">Email</th>
<th class="px-4 py-2 text-start">Action</th>
</tr>
</thead>
<tbody class="border border-border-color">
<tr class="border-b border-border-color bg-dark text-white">
<td class="inline-flex w-full items-center gap-2 px-4 py-3 text-start">
<span class="relative flex shrink-0">
<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
<span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span>
</span>
<span class="text-white">Mary</span>
</td>
<td class="px-4 py-3 text-start">john@example.com</td>
<td class="px-4 py-3 text-start">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i class="icon-ellipsis-vertical"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-eye text-gray-900 me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-pencil-line me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
</a>
</div>
</div>
</div>
</td>
</tr>
<tr class="border-b border-border-color bg-dark text-white">
<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
<span class="relative flex shrink-0">
<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
<span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span>
</span>
<span class="text-white">Moe</span>
</td>
<td class="px-4 py-3 text-white">mary@example.com</td>
<td class="px-4 py-3 text-white">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i class="icon-ellipsis-vertical"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-eye text-gray-900 me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-pencil-line me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
</a>
</div>
</div>
</div>
</td>
</tr>
<tr class="border-b border-border-color bg-dark text-white">
<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
<span class="relative flex shrink-0">
<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
<span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span>
</span>
<span class="text-white">Dooley</span>
</td>
<td class="px-4 py-3 text-white">july@example.com</td>
<td class="px-4 py-3 text-white">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i class="icon-ellipsis-vertical"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-eye text-gray-900 me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-pencil-line me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Bordered Table
| Firstname |
Email |
Action |
| John |
john@example.com |
|
| Mary |
mary@example.com |
|
| July |
july@example.com |
|
<div class="overflow-auto">
<table class="table-auto mb-0 w-full">
<thead class="border border-border-color">
<tr>
<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th>
<th class="px-4 py-2 bg-light text-dark text-start">Email</th>
<th class="px-4 py-2 bg-light text-dark text-start">Action</th>
</tr>
</thead>
<tbody class="border border-border-color">
<tr class="border border-border-color">
<td class="border border-border-color px-4 py-3 text-start">John</td>
<td class="border border-border-color px-4 py-3 text-start">john@example.com</td>
<td class="border border-border-color px-4 py-3 text-start">
<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
</td>
</tr>
<tr class="border border-border-color">
<td class="border border-border-color px-4 py-3 text-start">Mary</td>
<td class="border border-border-color px-4 py-3 text-start">mary@example.com</td>
<td class="border border-border-color px-4 py-3 text-start">
<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
</td>
</tr>
<tr class="border border-border-color">
<td class="border border-border-color px-4 py-3 text-start">July</td>
<td class="border border-border-color px-4 py-3 text-start">july@example.com</td>
<td class="border border-border-color px-4 py-3 text-start">
<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
</td>
</tr>
</tbody>
</table>
</div>
Striped Rows
| Firstname |
Lastname |
Action |
| John |
john@example.com |
|
| Mary |
mary@example.com |
|
| July |
july@example.com |
|
<div class="overflow-auto">
<table class="table-auto mb-0 w-full">
<thead>
<tr>
<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th>
<th class="px-4 py-2 bg-light text-dark text-start">Lastname</th>
<th class="px-4 py-2 bg-light text-dark text-start">Action</th>
</tr>
</thead>
<tbody>
<tr class="bg-light">
<td class="px-4 py-3 text-start">John</td>
<td class="px-4 py-3 text-start">john@example.com</td>
<td class="px-4 py-3 text-start">
<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
</td>
</tr>
<tr>
<td class="px-4 py-3 text-start">Mary</td>
<td class="px-4 py-3 text-start">mary@example.com</td>
<td class="px-4 py-3 text-start">
<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
</td>
</tr>
<tr class="bg-light">
<td class="px-4 py-3 text-start">July</td>
<td class="px-4 py-3 text-start">july@example.com</td>
<td class="px-4 py-3 text-start">
<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
</td>
</tr>
</tbody>
</table>
</div>
ENG
ARB
GER
