Table Utilities

Control table layouts, borders, and spacing with Tailwind classes.

Layout

Table Layout

Collapse

Width Full

Borders & Spacing

Border Width

Border Color

Padding

Alignment

Text Align

Vertical Align

Effects

Zebra Striped

Hover Effect

Product name	Color	Category	Price
Apple MacBook Pro 17"	Silver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99

HTML Output

<div class="relative overflow-x-auto">
    <table class="w-full table-auto border-collapse text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="p-4 border border-gray-600 text-left align-middle font-bold">Product name</th>
                <th scope="col" class="p-4 border border-gray-600 text-left align-middle font-bold">Color</th>
                <th scope="col" class="p-4 border border-gray-600 text-left align-middle font-bold">Category</th>
                <th scope="col" class="p-4 border border-gray-600 text-left align-middle font-bold">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td class="p-4 border border-gray-600 text-left align-middle font-medium text-gray-900 dark:text-white">Apple MacBook Pro 17"</td>
                <td class="p-4 border border-gray-600 text-left align-middle">Silver</td>
                <td class="p-4 border border-gray-600 text-left align-middle">Laptop</td>
                <td class="p-4 border border-gray-600 text-left align-middle">$2999</td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td class="p-4 border border-gray-600 text-left align-middle font-medium text-gray-900 dark:text-white">Microsoft Surface Pro</td>
                <td class="p-4 border border-gray-600 text-left align-middle">White</td>
                <td class="p-4 border border-gray-600 text-left align-middle">Laptop PC</td>
                <td class="p-4 border border-gray-600 text-left align-middle">$1999</td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td class="p-4 border border-gray-600 text-left align-middle font-medium text-gray-900 dark:text-white">Magic Mouse 2</td>
                <td class="p-4 border border-gray-600 text-left align-middle">Black</td>
                <td class="p-4 border border-gray-600 text-left align-middle">Accessories</td>
                <td class="p-4 border border-gray-600 text-left align-middle">$99</td>
            </tr>
        </tbody>
    </table>
</div>