Styling tables. Sounds like fun. But in 2024 it's kind of a big deal. There are a lot of tech outside which let overgrow something straigtforward to insane monster.
Tailwind table render looks like:
<div class="container mx-auto mt-5">
<table class="min-w-full table-auto border-collapse border border-gray-200">
<thead>
<tr>
<th class="border border-gray-300 bg-gray-100 px-4 py-2 text-gray-600 text-right">ID</th>
<th class="border border-gray-300 bg-gray-100 px-4 py-2 text-gray-600">Name</th>
<th class="border border-gray-300 bg-gray-100 px-4 py-2 text-gray-600">Email</th>
<th class="border border-gray-300 bg-gray-100 px-4 py-2 text-gray-600">Role</th>
</tr>
</thead>
<tbody class="text-gray-700">
<tr class="hover:bg-gray-50">
<td class="border border-gray-300 px-4 py-2 text-right">1</td>
<td class="border border-gray-300 px-4 py-2">John Doe</td>
<td class="border border-gray-300 px-4 py-2">johndoe@example.com</td>
<td class="border border-gray-300 px-4 py-2">Administrator</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="border border-gray-300 px-4 py-2 text-right">2</td>
<td class="border border-gray-300 px-4 py-2">Jane Doe</td>
<td class="border border-gray-300 px-4 py-2">janedoe@example.com</td>
<td class="border border-gray-300 px-4 py-2">Editor</td>
</tr>
</tbody>
</table>
</div>
1411 characters + 338 for each following row (without data). + a whole tailwind library.
<div class="table__wrapper">
<table class="table">
<thead>
<tr>
<th class="table__th table__th--right">ID</th>
<th class="table__th">Name</th>
<th class="table__th">Email</th>
<th class="table__th">Role</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__tr">
<td class="table__td table__td--right">1</td>
<td class="table__td">John Doe</td>
<td class="table__td">johndoe@example.com</td>
<td class="table__td">Administrator</td>
</tr>
<tr class="table__tr">
<td class="table__td table__td--right">2</td>
<td class="table__td">Jane Doe</td>
<td class="table__td">janedoe@example.com</td>
<td class="table__td">Editor</td>
</tr>
</tbody>
</table>
</div>
970 characters + 245 for each following row (without data).
<div class="myTable">
<table>
<thead>
<tr>
<th class="textRight">ID</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td class="textRight">1</td>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td class="textRight">2</td>
<td>Jane Doe</td>
<td>janedoe@example.com</td>
<td>Editor</td>
</tr>
</tbody>
</table>
</div>
685 characters + 156 for each following row (without data).