Tailwind table style example
tailwindHere 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.
Other Article on Tag tailwind
- - Tailwind add padding in t-head and body
- - Tailwind Breadcrumb style example
- - Tailwind button group style example
- - Tailwind button style example
- - Tailwind card component example
- - Tailwind create component in an Angular project
- - Tailwind CSS accordion style example
- - Tailwind CSS advantages and disadvantages
- - Tailwind CSS dropdown style example
- - Tailwind CSS install to angular