What is Table and data grid patterns in Tailwind?

Tailwindmarkup~5 mins

Table and data grid patterns in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Tables help organize information in rows and columns so it's easy to read and compare. Data grids add features like sorting and scrolling for better use.

Showing a list of products with prices and details on a website.

Displaying user information like names, emails, and roles in an admin panel.

Presenting schedules or timetables where times and events line up clearly.

Comparing features of different items side by side.

Creating a simple spreadsheet-like view for data entry or review.

Syntax

Tailwind

<table class="min-w-full border-collapse border border-gray-300">
  <thead>
    <tr class="bg-gray-100">
      <th class="border border-gray-300 px-4 py-2 text-left">Header 1</th>
      <th class="border border-gray-300 px-4 py-2 text-left">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 px-4 py-2">Data 1</td>
      <td class="border border-gray-300 px-4 py-2">Data 2</td>
    </tr>
  </tbody>
</table>

Use <thead> for headers and <tbody> for data rows to keep structure clear.

Tailwind classes like border, px-4, and py-2 add spacing and borders for readability.

Examples

A simple table with two columns and one data row, using lighter header background.

Tailwind

<table class="min-w-full border-collapse border border-gray-300">
  <thead>
    <tr class="bg-gray-200">
      <th class="border border-gray-300 px-3 py-1">Name</th>
      <th class="border border-gray-300 px-3 py-1">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 px-3 py-1">Alice</td>
      <td class="border border-gray-300 px-3 py-1">30</td>
    </tr>
  </tbody>
</table>

This example adds horizontal scrolling for small screens using overflow-x-auto. Rows alternate background colors for easier reading.

Tailwind

<div class="overflow-x-auto">
  <table class="min-w-full border-collapse border border-gray-300">
    <thead>
      <tr class="bg-gray-100">
        <th class="border border-gray-300 px-4 py-2">Product</th>
        <th class="border border-gray-300 px-4 py-2">Price</th>
        <th class="border border-gray-300 px-4 py-2">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-gray-300 px-4 py-2">Book</td>
        <td class="border border-gray-300 px-4 py-2">$10</td>
        <td class="border border-gray-300 px-4 py-2">15</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="border border-gray-300 px-4 py-2">Pen</td>
        <td class="border border-gray-300 px-4 py-2">$2</td>
        <td class="border border-gray-300 px-4 py-2">100</td>
      </tr>
    </tbody>
  </table>
</div>

Sample Program

This is a complete webpage showing a user list in a table. It uses Tailwind CSS for styling. The table has borders, alternating row colors, and a hover effect to highlight rows. The container allows horizontal scrolling on small screens.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Data Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 bg-gray-50">
  <main class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-semibold mb-4">User List</h1>
    <div class="overflow-x-auto border border-gray-300 rounded">
      <table class="min-w-full border-collapse">
        <thead class="bg-gray-100">
          <tr>
            <th class="border border-gray-300 px-4 py-2 text-left">Name</th>
            <th class="border border-gray-300 px-4 py-2 text-left">Email</th>
            <th class="border border-gray-300 px-4 py-2 text-left">Role</th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-white hover:bg-gray-50">
            <td class="border border-gray-300 px-4 py-2">John Doe</td>
            <td class="border border-gray-300 px-4 py-2">john@example.com</td>
            <td class="border border-gray-300 px-4 py-2">Admin</td>
          </tr>
          <tr class="bg-gray-50 hover:bg-gray-100">
            <td class="border border-gray-300 px-4 py-2">Jane Smith</td>
            <td class="border border-gray-300 px-4 py-2">jane@example.com</td>
            <td class="border border-gray-300 px-4 py-2">Editor</td>
          </tr>
          <tr class="bg-white hover:bg-gray-50">
            <td class="border border-gray-300 px-4 py-2">Bob Lee</td>
            <td class="border border-gray-300 px-4 py-2">bob@example.com</td>
            <td class="border border-gray-300 px-4 py-2">Viewer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Use overflow-x-auto on a container around the table to make it scroll horizontally on small screens.

Alternating row colors (bg-white and bg-gray-50) help eyes follow rows easily.

Adding hover:bg-gray-50 or similar classes improves user experience by highlighting rows on mouse hover.

Summary

Tables organize data in rows and columns for easy reading.

Tailwind CSS classes add borders, spacing, and colors to make tables clear and nice looking.

Use containers with horizontal scrolling for tables on small screens to keep content accessible.