How to write table in 2024

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 everywhere

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.

BEM is slightly better

<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).

Old-school approach

<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).