Basic Table
Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.
| # | Name | Job | Favorite Color |
|---|---|---|---|
| 1 | Cy Ganderton | Quality Control Specialist | Blue |
| 2 | Hart Hagerty | Desktop Support Technician | Purple |
| 3 | Brice Swyre | Tax Accountant | Red |
| 4 | Marjy Ferencz | Office Assistant I | Crimson |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap px-3 py-3 font-semibold uppercase text-slate-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
</tr>
</tbody>
</table>
</div>
Bordered Table
Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.
| # | Name | Job | Favorite Color |
|---|---|---|---|
| 1 | Cy Ganderton | Quality Control Specialist | Blue |
| 2 | Hart Hagerty | Desktop Support Technician | Purple |
| 3 | Brice Swyre | Tax Accountant | Red |
| 4 | Marjy Ferencz | Office Assistant I | Crimson |
<div
class="is-scrollbar-hidden min-w-full overflow-x-auto rounded-lg border border-slate-200 dark:border-navy-500"
>
<table class="w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap border border-t-0 border-l-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap border border-t-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap border border-t-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap border border-t-0 border-r-0 border-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:border-navy-500 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
1
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Cy Ganderton
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Quality Control Specialist
</td>
<td
class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Blue
</td>
</tr>
<tr>
<td
class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
2
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Hart Hagerty
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Desktop Support Technician
</td>
<td
class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Purple
</td>
</tr>
<tr>
<td
class="whitespace-nowrap border border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
3
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Brice Swyre
</td>
<td
class="whitespace-nowrap border border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Tax Accountant
</td>
<td
class="whitespace-nowrap border border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Red
</td>
</tr>
<tr>
<td
class="whitespace-nowrap border border-b-0 border-l-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
4
</td>
<td
class="whitespace-nowrap border border-b-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Marjy Ferencz
</td>
<td
class="whitespace-nowrap border border-b-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Office Assistant I
</td>
<td
class="whitespace-nowrap border border-b-0 border-r-0 border-slate-200 px-3 py-3 dark:border-navy-500 lg:px-5"
>
Crimson
</td>
</tr>
</tbody>
</table>
</div>
Hoverable Rows
Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.
| # | Name | Job | Favorite Color |
|---|---|---|---|
| 1 | Cy Ganderton | Quality Control Specialist | Blue |
| 2 | Hart Hagerty | Desktop Support Technician | Purple |
| 3 | Brice Swyre | Tax Accountant | Red |
| 4 | Marjy Ferencz | Office Assistant I | Crimson |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
Purple
</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Red</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
Crimson
</td>
</tr>
</tbody>
</table>
</div>
Zebra Table
Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.
| # | Name | Job | Favorite Color |
|---|---|---|---|
| 1 | Cy Ganderton | Quality Control Specialist | Blue |
| 2 | Hart Hagerty | Desktop Support Technician | Purple |
| 3 | Brice Swyre | Tax Accountant | Red |
| 4 | Marjy Ferencz | Office Assistant I | Crimson |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-zebra w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap rounded-l-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap rounded-r-lg bg-slate-200 px-3 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
Purple
</td>
</tr>
<tr>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">Red</td>
</tr>
<tr>
<td class="whitespace-nowrap rounded-l-lg px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap rounded-r-lg px-4 py-3 sm:px-5">
Crimson
</td>
</tr>
</tbody>
</table>
</div>
Full Width Table
Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.
| # | Name | Job | Favorite Color |
|---|---|---|---|
| 1 | Cy Ganderton | Quality Control Specialist | Blue |
| 2 | Hart Hagerty | Desktop Support Technician | Purple |
| 3 | Brice Swyre | Tax Accountant | Red |
| 4 | Marjy Ferencz | Office Assistant I | Crimson |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
</tr>
<tr class="border border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
</tr>
</tbody>
</table>
</div>
Full Width Zebra Table
Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Check out code for detail of usage.
| # | Name | Job | Favorite Color |
|---|---|---|---|
| 1 | Cy Ganderton | Quality Control Specialist | Blue |
| 2 | Hart Hagerty | Desktop Support Technician | Purple |
| 3 | Brice Swyre | Tax Accountant | Red |
| 4 | Marjy Ferencz | Office Assistant I | Crimson |
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-zebra w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Job
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Favorite Color
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Cy Ganderton</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Quality Control Specialist
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Blue</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Hart Hagerty</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Desktop Support Technician
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Purple</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Brice Swyre</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Tax Accountant</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Red</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Marjy Ferencz</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
Office Assistant I
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">Crimson</td>
</tr>
</tbody>
</table>
</div>