Tables
Data tables for displaying structured information with support for sorting, striping, hover states, and responsive layouts. Includes specialized task table layouts for project management functionality.
Quick Navigation
Basic Table
Clean, minimal table design with proper spacing and typography. Perfect for displaying simple data sets.
| Name | Role | Status | Actions | |
|---|---|---|---|---|
|
JS
John Smith
|
john@example.com | Admin | Active |
|
|
JD
Jane Doe
|
jane@example.com | Editor | Active |
|
|
MJ
Mike Johnson
|
mike@example.com | Viewer | Inactive |
|
HTML Structure
<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Email</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
<th class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
JS
</div>
<div class="font-medium text-gray-900 dark:text-white">
John Smith
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-600 dark:text-gray-300">
john@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Admin</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex space-x-2 justify-end">
<button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300" title="Edit">
<!-- Edit icon -->
</button>
<button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300" title="Delete">
<!-- Delete icon -->
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>Striped Table
Alternating row colors improve readability for larger datasets. Includes hover states for better interaction feedback.
| Project | Owner | Progress | Due Date | Status |
|---|---|---|---|---|
|
Website Redesign
Modern UI/UX overhaul
|
JS
John Smith
|
|
Dec 31, 2024 | In Progress |
|
Mobile App
Cross-platform development
|
JD
Jane Doe
|
|
Nov 15, 2024 | Complete |
|
API Documentation
Comprehensive API docs
|
MJ
Mike Johnson
|
|
Jan 15, 2025 | Overdue |
HTML Structure
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
<!-- Regular row -->
</tr>
<tr class="bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800">
<!-- Striped row -->
</tr>
</tbody>Sortable Table
Interactive table headers with sorting capabilities. Click on column headers to sort data.
| Name | Department | Salary | Start Date | Actions |
|---|---|---|---|---|
| Alice Johnson | Engineering | $75,000 | Jan 15, 2023 | |
| Bob Smith | Marketing | $65,000 | Mar 20, 2023 | |
| Carol Williams | Design | $70,000 | Nov 10, 2022 |
HTML Structure
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" data-sort="name">
Name
<svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
</svg>
</th>Usage Guidelines
Best Practices
- Clear headers: Use descriptive column headers that clearly indicate data type
- Consistent alignment: Align text left, numbers right, and center for short labels
- Visual hierarchy: Use font weights and colors to establish information hierarchy
- Adequate spacing: Provide enough padding and line height for readability
- Responsive design: Ensure tables work well on all screen sizes
- Loading states: Show skeleton loaders while data is being fetched
When to Use Tables
- Structured data: When displaying data that needs to be compared across multiple attributes
- Large datasets: For displaying many items that benefit from sorting and filtering
- Admin interfaces: Management interfaces where users need to perform bulk actions
- Financial data: Numbers, currencies, and calculations that need precise alignment
- Status tracking: Project management or task tracking where progress needs to be visible
CSS Classes Reference
Table CSS Classes
/* Base Container */
.bg-white.dark:bg-gray-800.shadow.overflow-hidden.sm:rounded-lg
/* Table Structure */
.min-w-full.divide-y.divide-gray-200.dark:divide-gray-700
/* Table Head */
.bg-gray-50.dark:bg-gray-900
/* Header Cells */
.px-6.py-3.text-left.text-xs.font-medium.text-gray-500.dark:text-gray-400.uppercase.tracking-wider
/* Table Body */
.bg-white.dark:bg-gray-800.divide-y.divide-gray-200.dark:divide-gray-700
/* Body Cells */
.px-6.py-4.whitespace-nowrap
/* Status Badges */
.inline-flex.px-2.py-1.text-xs.font-semibold.rounded-full
/* Hover States */
.hover:bg-gray-50.dark:hover:bg-gray-700
/* Striped Rows */
.bg-gray-50.dark:bg-gray-900
/* Action Buttons */
.text-indigo-600.hover:text-indigo-900.dark:text-indigo-400.dark:hover:text-indigo-300