Tailwind table style example

tailwind

Here is an example of a table styled using Tailwind CSS classes:


<table class="table-auto">
    <thead>
    <tr>
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2">Email</th>
        <th class="px-4 py-2">Phone</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="border px-4 py-2">John Doe</td>
        <td class="border px-4 py-2">[email protected]</td>
        <td class="border px-4 py-2">(123) 456-7890</td>
    </tr>
    <tr>
        <td class="border px-4 py-2">Jane Doe</td>
        <td class="border px-4 py-2">[email protected]</td>
        <td class="border px-4 py-2">(987) 654-3210</td>
    </tr>
    </tbody>
</table>

This will create a table with three columns (Name, Email, and Phone) and two rows of data. The table-auto class applies some basic styling to the table, including setting the width to fit the content and adding horizontal dividers between the rows. The px-4 py-2 classes add some padding to the cells, and the border class adds a border around the cells.

You can customize the appearance of the table further by using additional Tailwind CSS classes. For example, you could use the bg-gray-200 class to give the rows a light gray background color, or the text-xs class to make the text in the cells smaller.

other example


<table class="table-auto w-full">
    <thead>
    <tr class="bg-gray-800 text-white">
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2">Email</th>
        <th class="px-4 py-2">Phone</th>
    </tr>
    </thead>
    <tbody>
    <tr class="bg-gray-100">
        <td class="px-4 py-2">Alice Smith</td>
        <td class="px-4 py-2">[email protected]</td>
        <td class="px-4 py-2">(123) 456-7890</td>
    </tr>
    <tr class="bg-gray-200">
        <td class="px-4 py-2">Bob Johnson</td>
        <td class="px-4 py-2">[email protected]</td>
        <td class="px-4 py-2">(987) 654-3210</td>
    </tr>
    </tbody>
</table>

This will create a table with a striped appearance, where the alternating rows have a light and dark background color. The table headers have a dark background color and white text. The table cells have some padding to give them some space from the edges of the table.