Home > Tailwind Components > Tables

Tailwind CSS Tables

1. Tailwind Table Striped

Name Title Email Status
John Doe Software Engineer john@example.com Active
Jane Doe Product Manager jane@example.com Inactive 
<div class="overflow-x-auto">
  <table class="min-w-full text-left text-sm text-gray-500">
    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
      <tr>
        <th scope="col" class="px-6 py-3">Name</th>
        <th scope="col" class="px-6 py-3">Title</th>
        <th scope="col" class="px-6 py-3">Email</th>
        <th scope="col" class="px-6 py-3">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white border-b hover:bg-gray-50">
        <td class="px-6 py-4">John Doe</td>
        <td class="px-6 py-4">Software Engineer</td>
        <td class="px-6 py-4">john@example.com</td>
        <td class="px-6 py-4 text-green-600">Active</td>
      </tr>
      <tr class="bg-gray-50 border-b hover:bg-gray-100">
        <td class="px-6 py-4">Jane Doe</td>
        <td class="px-6 py-4">Product Manager</td>
        <td class="px-6 py-4">jane@example.com</td>
        <td class="px-6 py-4 text-red-600">Inactive</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>
</div>

2. Tailwind Table Bordered

ID Name Role Status
1 Alice Smith Admin Active
2 Bob Johnson Editor Inactive 
<div class="overflow-x-auto">
  <table class="min-w-full border text-left text-sm text-gray-500">
    <thead class="bg-gray-200 text-xs uppercase text-gray-700">
      <tr>
        <th scope="col" class="border px-6 py-3">ID</th>
        <th scope="col" class="border px-6 py-3">Name</th>
        <th scope="col" class="border px-6 py-3">Role</th>
        <th scope="col" class="border px-6 py-3">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white">
        <td class="border px-6 py-4">1</td>
        <td class="border px-6 py-4">Alice Smith</td>
        <td class="border px-6 py-4">Admin</td>
        <td class="border px-6 py-4 text-green-500">Active</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="border px-6 py-4">2</td>
        <td class="border px-6 py-4">Bob Johnson</td>
        <td class="border px-6 py-4">Editor</td>
        <td class="border px-6 py-4 text-red-500">Inactive</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>
</div>

3. Tailwind Table Row Hoverable

Product Price Stock Category
Laptop $1,200 In Stock Electronics
Phone $800 In Stock Electronics 
<div class="overflow-x-auto">
  <table class="min-w-full text-left text-sm text-gray-500">
    <thead class="bg-blue-100 text-xs uppercase text-gray-700">
      <tr>
        <th scope="col" class="px-6 py-3">Product</th>
        <th scope="col" class="px-6 py-3">Price</th>
        <th scope="col" class="px-6 py-3">Stock</th>
        <th scope="col" class="px-6 py-3">Category</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b hover:bg-blue-50">
        <td class="px-6 py-4">Laptop</td>
        <td class="px-6 py-4">$1,200</td>
        <td class="px-6 py-4">In Stock</td>
        <td class="px-6 py-4">Electronics</td>
      </tr>
      <tr class="border-b hover:bg-blue-50">
        <td class="px-6 py-4">Phone</td>
        <td class="px-6 py-4">$800</td>
        <td class="px-6 py-4">In Stock</td>
        <td class="px-6 py-4">Electronics</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>
</div>

4. Tailwind Table Compact

Date Transaction ID Amount Status
2024-09-15 TXN123456789 $250.00 Completed
2024-09-16 TXN987654321 $75.00 Failed 
<div class="overflow-x-auto">
  <table class="min-w-full text-left text-sm text-gray-500">
    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
      <tr>
        <th scope="col" class="px-4 py-2">Date</th>
        <th scope="col" class="px-4 py-2">Transaction ID</th>
        <th scope="col" class="px-4 py-2">Amount</th>
        <th scope="col" class="px-4 py-2">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b">
        <td class="px-4 py-2">2024-09-15</td>
        <td class="px-4 py-2">TXN123456789</td>
        <td class="px-4 py-2">$250.00</td>
        <td class="px-4 py-2 text-green-500">Completed</td>
      </tr>
      <tr class="border-b">
        <td class="px-4 py-2">2024-09-16</td>
        <td class="px-4 py-2">TXN987654321</td>
        <td class="px-4 py-2">$75.00</td>
        <td class="px-4 py-2 text-red-500">Failed</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>
</div>

5. Tailwind Table with Dividers

Project Owner Deadline Status
Website Redesign Alice Smith 2024-09-30 In Progress
Mobile App Bob Johnson 2024-10-15 Delayed
Marketing Campaign David Lee 2024-11-01 Planned
SEO Optimization Eve Taylor 2024-11-30 On Hold 
<div class="overflow-x-auto">
  <table class="min-w-full text-left text-sm text-gray-500">
    <thead class="bg-indigo-100 text-xs uppercase text-gray-700">
      <tr>
        <th class="px-6 py-3">Project</th>
        <th class="px-6 py-3">Owner</th>
        <th class="px-6 py-3">Deadline</th>
        <th class="px-6 py-3">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white">
        <td class="px-6 py-4">Website Redesign</td>
        <td class="px-6 py-4">Alice Smith</td>
        <td class="px-6 py-4">2024-09-30</td>
        <td class="px-6 py-4 text-green-600">In Progress</td>
      </tr>
      <tr class="bg-white">
        <td class="px-6 py-4">Mobile App</td>
        <td class="px-6 py-4">Bob Johnson</td>
        <td class="px-6 py-4">2024-10-15</td>
        <td class="px-6 py-4 text-yellow-600">Delayed</td>
      </tr>
      <tr class="border-t-4 border-indigo-500"></tr> <!-- Section Divider -->
      <tr class="bg-gray-50">
        <td class="px-6 py-4">Marketing Campaign</td>
        <td class="px-6 py-4">David Lee</td>
        <td class="px-6 py-4">2024-11-01</td>
        <td class="px-6 py-4 text-blue-600">Planned</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="px-6 py-4">SEO Optimization</td>
        <td class="px-6 py-4">Eve Taylor</td>
        <td class="px-6 py-4">2024-11-30</td>
        <td class="px-6 py-4 text-red-600">On Hold</td>
      </tr>
    </tbody>
  </table>
</div>

6. Tailwind Table Cards

Task Assigned to Due Date Priority
Design Landing Page Alice 2024-09-29 High
Task Assigned to Due Date Priority
Update Documentation Bob 2024-10-02 Medium 
<div class="space-y-4">
  <div class="bg-white shadow-md rounded-lg">
    <table class="min-w-full text-left text-sm text-gray-500">
      <thead class="bg-gray-100 text-xs uppercase text-gray-700">
        <tr>
          <th class="px-6 py-3">Task</th>
          <th class="px-6 py-3">Assigned to</th>
          <th class="px-6 py-3">Due Date</th>
          <th class="px-6 py-3">Priority</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b">
          <td class="px-6 py-4">Design Landing Page</td>
          <td class="px-6 py-4">Alice</td>
          <td class="px-6 py-4">2024-09-29</td>
          <td class="px-6 py-4 text-green-600">High</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="bg-white shadow-md rounded-lg">
    <table class="min-w-full text-left text-sm text-gray-500">
      <thead class="bg-gray-100 text-xs uppercase text-gray-700">
        <tr>
          <th class="px-6 py-3">Task</th>
          <th class="px-6 py-3">Assigned to</th>
          <th class="px-6 py-3">Due Date</th>
          <th class="px-6 py-3">Priority</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b">
          <td class="px-6 py-4">Update Documentation</td>
          <td class="px-6 py-4">Bob</td>
          <td class="px-6 py-4">2024-10-02</td>
          <td class="px-6 py-4 text-yellow-600">Medium</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- Add more card-style rows as needed -->
</div>

7. Tailwind Table With Gradient Background

Order ID Customer Amount Status
#000123 John Doe $299.99 Paid
#000124 Jane Smith $150.00 Pending
Total $449.99 
<div class="overflow-x-auto">
  <table class="min-w-full text-left text-sm text-gray-500">
    <thead class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
      <tr>
        <th class="px-6 py-3">Order ID</th>
        <th class="px-6 py-3">Customer</th>
        <th class="px-6 py-3">Amount</th>
        <th class="px-6 py-3">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white border-b hover:bg-gray-100">
        <td class="px-6 py-4">#000123</td>
        <td class="px-6 py-4">John Doe</td>
        <td class="px-6 py-4">$299.99</td>
        <td class="px-6 py-4 text-green-600">Paid</td>
      </tr>
      <tr class="bg-gray-50 border-b hover:bg-gray-100">
        <td class="px-6 py-4">#000124</td>
        <td class="px-6 py-4">Jane Smith</td>
        <td class="px-6 py-4">$150.00</td>
        <td class="px-6 py-4 text-yellow-600">Pending</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
    <tfoot class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
      <tr>
        <td class="px-6 py-3">Total</td>
        <td></td>
        <td class="px-6 py-3">$449.99</td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>

8. Tailwind Table With Highlighted Column

Feature Pro Plan Basic Plan
Storage 1TB 500GB
Support 24/7 Business hours
Backup Daily Weekly 
<div class="overflow-x-auto">
  <table class="min-w-full text-left text-sm text-gray-500">
    <thead class="bg-gray-100 text-xs uppercase text-gray-700">
      <tr>
        <th class="px-6 py-3">Feature</th>
        <th class="px-6 py-3 bg-yellow-100 text-yellow-800">Pro Plan</th>
        <th class="px-6 py-3">Basic Plan</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b">
        <td class="px-6 py-4">Storage</td>
        <td class="px-6 py-4 bg-yellow-50">1TB</td>
        <td class="px-6 py-4">500GB</td>
      </tr>
      <tr class="border-b">
        <td class="px-6 py-4">Support</td>
        <td class="px-6 py-4 bg-yellow-50">24/7</td>
        <td class="px-6 py-4">Business hours</td>
      </tr>
      <tr class="border-b">
        <td class="px-6 py-4">Backup</td>
        <td class="px-6 py-4 bg-yellow-50">Daily</td>
        <td class="px-6 py-4">Weekly</td>
      </tr>
    </tbody>
  </table>
</div>