Tables
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100">
<tr>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">#</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">First</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">Last</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">Handle</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">1</th>
<td class="px-6 py-4 whitespace-nowrap">Mark</td>
<td class="px-6 py-4 whitespace-nowrap">Otto</td>
<td class="px-6 py-4 whitespace-nowrap">@mdo</td>
</tr>
<tr>
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">2</th>
<td class="px-6 py-4 whitespace-nowrap">Jacob</td>
<td class="px-6 py-4 whitespace-nowrap">Thornton</td>
<td class="px-6 py-4 whitespace-nowrap">@fat</td>
</tr>
<tr>
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">3</th>
<td colspan="2" class="px-6 py-4 whitespace-nowrap">Larry the Bird</td>
<td class="px-6 py-4 whitespace-nowrap">@twitter</td>
</tr>
</tbody>
</table>
</div>
Varients
Use the required class variant (e.g. table-primary, table-secondary) for color.
Class |
Heading |
Heading |
Default |
Cell |
Cell |
Primary |
Cell |
Cell |
Secondary |
Cell |
Cell |
Success |
Cell |
Cell |
Danger |
Cell |
Cell |
Warning |
Cell |
Cell |
Info |
Cell |
Cell |
Light |
Cell |
Cell |
Dark |
Cell |
Cell |
<div class="mt-4">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100">
<tr>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-600 uppercase">Class</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-600 uppercase">Heading</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-600 uppercase">Heading</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Default</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-blue-100 hover:bg-blue-200">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Primary</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-gray-300 hover:bg-gray-400">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Secondary</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-green-100 hover:bg-green-200">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Success</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-red-100 hover:bg-red-200">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Danger</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-orange-100 hover:bg-orange-200">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Warning</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-cyan-100 hover:bg-cyan-200">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Info</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="bg-gray-200 hover:bg-gray-300">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Light</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-white bg-gray-900 hover:bg-gray-900">
<th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Dark</th>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
</tbody>
</table>
</div>