Tables are essential for displaying data in a clear and organized way. With Tailwind CSS, you can easily create beautiful and functional tables. In this tutorial, we will guide you through creating simple tables, adding table components, incorporating icons, and using dividers to enhance the table’s appearance.
1. Create Simple table using Tailwind CSS.
<table class="min-w-full bg-white border border-gray-300">
<thead>
<tr>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Name
</th>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Email
</th>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Role
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
John Doe
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
[email protected]
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
Admin
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
Jane Smith
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
[email protected]
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
User
</td>
</tr>
</tbody>
</table>
2. Striped Table with Hover Effect.
<table class="min-w-full bg-white">
<thead>
<tr>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-gray-500 uppercase tracking-wider">
Product
</th>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-gray-500 uppercase tracking-wider">
Price
</th>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-gray-500 uppercase tracking-wider">
Stock
</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="hover:bg-gray-100">
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
Laptop
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
$999
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
23
</td>
</tr>
<tr class="bg-gray-50 hover:bg-gray-100">
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
Smartphone
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
$699
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
15
</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
Headphones
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
$199
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
56
</td>
</tr>
</tbody>
</table>
This table features alternating row colors (white and light gray) for a striped effect and a hover effect with hover:bg-gray-100. The header has a thicker bottom border and uppercase text, while each cell includes padding, a bottom border, and whitespace-no-wrap to prevent wrapping.
3. Responsive Table with Action Buttons.
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead>
<tr>
<th class="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
Name
</th>
<th class="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
Email
</th>
<th class="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
Status
</th>
<th class="px-4 py-2 bg-gray-200 text-gray-600 border-b border-gray-300 text-left text-sm uppercase font-semibold">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-2 border-b border-gray-300">John Doe</td>
<td class="px-4 py-2 border-b border-gray-300">[email protected]</td>
<td class="px-4 py-2 border-b border-gray-300">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-4 py-2 border-b border-gray-300">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs">
Edit
</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded text-xs ml-1">
Delete
</button>
</td>
</tr>
<!-- More rows here -->
</tbody>
</table>
</div>
The table, wrapped in an overflow-x-auto div, scrolls horizontally on small screens. It has a header with gray background and uppercase text, a Status column with custom-colored badges, and an Actions column with styled buttons. Cells include padding and bottom borders, and buttons offer hover effects (hover:bg-blue-700 and hover:bg-red-700) for interaction.
4. Table with SVG Icons.
<table class="min-w-full bg-white border border-gray-300">
<thead>
<tr>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Type
</th>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Name
</th>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Size
</th>
<th class="px-6 py-3 border-b border-gray-300 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
document.pdf
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
2.5 MB
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
<button class="text-blue-500 hover:text-blue-700">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
spreadsheet.xlsx
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
1.8 MB
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
<button class="text-blue-500 hover:text-blue-700">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
Table Structure Tailwind CSS styles the table with borders, padding, and text alignment; the header row features light gray background and uppercase text.
SVG Icons and Styling: Heroicons’ inline SVGs in the Type column denote file types (PDF in blue, spreadsheet in green); the “Action” column uses a download icon, all icons sized and colored via Tailwind classes.
