BP HTML 07 Tailwind

Tailwind CSS Tables Overview

Basic Table

Create a simple table with borders, padding, and basic styling using Tailwind classes.

<table class="table-auto border border-gray-300 w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2">Name</th>
      <th class="border px-4 py-2">Age</th>
      <th class="border px-4 py-2">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Alice</td>
      <td class="border px-4 py-2">25</td>
      <td class="border px-4 py-2">New York</td>
    </tr>
  </tbody>
</table>
Name Age City
Alice 25 New York
Bob 30 Los Angeles
Charlie 28 Chicago

Striped Table

Use alternating row colors for better readability using bg-gray-50 and bg-white.

<tr class="bg-gray-50"><td>Alice</td></tr>
<tr class="bg-white"><td>Bob</td></tr>
Name Age City
Alice 25 New York
Bob 30 Los Angeles
Charlie 28 Chicago

Bordered Table

Add border classes to table, rows, and cells for clear separation.

<table class="table-auto border border-gray-300 border-4">
  <tr><td class="border">Cell</td></tr>
</table>
Name Age City
Alice 25 New York
Bob 30 Los Angeles
Charlie 28 Chicago

Responsive Table

Wrap table in a container with overflow-x-auto to make it scrollable on small screens.

<div class="overflow-x-auto">
  <table class="table-auto w-full"></table>
</div>
Name Age City Country Email
Alice 25 New York USA alice@example.com
Bob 30 Los Angeles USA bob@example.com