Tables
Using the most basic table markup, here's how tables look.
Basic Example
Using the most basic table markup, here's how tables look.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Thornton | |
<div class="relative overflow-x-auto">
<table class="text-left w-full whitespace-nowrap">
<thead class="bg-gray-200 text-gray-700 ">
<tr class="border-gray-300 border-b ">
<th scope="col" class="px-6 py-3">#</th>
<th scope="col" class="px-6 py-3">First</th>
<th scope="col" class="px-6 py-3">Last</th>
<th scope="col" class="px-6 py-3">Handle</th>
</tr>
</thead>
<tbody class="divide-y ">
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left">1</td>
<td class="py-3 px-6 text-left">Mark</td>
<td class="py-3 px-6 text-left">Otto</td>
<td class="py-3 px-6 text-left">@mdo</td>
</tr>
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left">2</td>
<td class="py-3 px-6 text-left">Jacob</td>
<td class="py-3 px-6 text-left">Thornton</td>
<td class="py-3 px-6 text-left">@fat</td>
</tr>
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left">3</td>
<td colspan="2" class="py-3 px-6 text-left">Larry the Bird</td>
<td class="py-3 px-6 text-left">Thornton</td>
</tr>
</tbody>
</table>
</div>Striped Table
Use this example to increase the readability of the data sets by alternating the background color of every second table row.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Thornton | |
| 4 | Jacob | Thornton | @fat |
<div class="relative overflow-x-auto">
<table class="text-left w-full whitespace-nowrap">
<thead class="">
<tr class="border-gray-300 border-b ">
<th scope="col" class="px-6 py-3">#</th>
<th scope="col" class="px-6 py-3">First</th>
<th scope="col" class="px-6 py-3">Last</th>
<th scope="col" class="px-6 py-3">Handle</th>
</tr>
</thead>
<tbody class="divide-y ">
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left">1</td>
<td class="py-3 px-6 text-left">Mark</td>
<td class="py-3 px-6 text-left">Otto</td>
<td class="py-3 px-6 text-left">@mdo</td>
</tr>
<tr class="border-gray-300 border-b bg-gray-100 ">
<td class="py-3 px-6 text-left">2</td>
<td class="py-3 px-6 text-left">Jacob</td>
<td class="py-3 px-6 text-left">Thornton</td>
<td class="py-3 px-6 text-left">@fat</td>
</tr>
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left">3</td>
<td colspan="2" class="py-3 px-6 text-left">Larry the Bird</td>
<td class="py-3 px-6 text-left">Thornton</td>
</tr>
<tr class="border-gray-300 border-b bg-gray-100 ">
<td class="py-3 px-6 text-left">4</td>
<td class="py-3 px-6 text-left">Jacob</td>
<td class="py-3 px-6 text-left">Thornton</td>
<td class="py-3 px-6 text-left">@fat</td>
</tr>
</tbody>
</table>
</div>Hoverable rows
Add hover-state on table row.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Thornton | |
| 4 | Jacob | Thornton | @fat |
<div class="relative overflow-x-auto">
<table class="text-left w-full whitespace-nowrap">
<thead class="">
<tr class="border-gray-300 border-b ">
<th scope="col" class="px-6 py-3">#</th>
<th scope="col" class="px-6 py-3">First</th>
<th scope="col" class="px-6 py-3">Last</th>
<th scope="col" class="px-6 py-3">Handle</th>
</tr>
</thead>
<tbody class="divide-y ">
<tr class="border-gray-300 border-b hover:bg-gray-100 ">
<td class="py-3 px-6 text-left">1</td>
<td class="py-3 px-6 text-left">Mark</td>
<td class="py-3 px-6 text-left">Otto</td>
<td class="py-3 px-6 text-left">@mdo</td>
</tr>
<tr class="border-gray-300 border-b hover:bg-gray-100 ">
<td class="py-3 px-6 text-left">2</td>
<td class="py-3 px-6 text-left">Jacob</td>
<td class="py-3 px-6 text-left">Thornton</td>
<td class="py-3 px-6 text-left">@fat</td>
</tr>
<tr class="border-gray-300 border-b hover:bg-gray-100 ">
<td class="py-3 px-6 text-left">3</td>
<td colspan="2" class="py-3 px-6 text-left">Larry the Bird</td>
<td class="py-3 px-6 text-left">Thornton</td>
</tr>
<tr class="border-gray-300 border-b hover:bg-gray-100 ">
<td class="py-3 px-6 text-left">4</td>
<td class="py-3 px-6 text-left">Jacob</td>
<td class="py-3 px-6 text-left">Thornton</td>
<td class="py-3 px-6 text-left">@fat</td>
</tr>
</tbody>
</table>
</div>Bordered tables
Add border on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Thornton | |
| 4 | Jacob | Thornton | @fat |
<table class="text-left w-full whitespace-nowrap border border-gray-300">
<thead class="">
<tr class="border-gray-300 border-b ">
<th scope="col" class="px-6 py-3 border-r border-gray-300 ">#</th>
<th scope="col" class="px-6 py-3 border-r border-gray-300 ">First</th>
<th scope="col" class="px-6 py-3 border-r border-gray-300 ">Last</th>
<th scope="col" class="px-6 py-3 border-r border-gray-300 ">Handle</th>
</tr>
</thead>
<tbody class="divide-y ">
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left border-r border-gray-300 ">1</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Mark</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Otto</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">@mdo</td>
</tr>
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left border-r border-gray-300 ">2</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Jacob</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Thornton</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">@fat</td>
</tr>
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left border-r border-gray-300 ">3</td>
<td colspan="2" class="py-3 px-6 text-left border-r border-gray-300 ">Larry the Bird</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Thornton</td>
</tr>
<tr class="border-gray-300 border-b ">
<td class="py-3 px-6 text-left border-r border-gray-300 ">4</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Jacob</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">Thornton</td>
<td class="py-3 px-6 text-left border-r border-gray-300 ">@fat</td>
</tr>
</tbody>
</table>