JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<table class="premier" summary="something">
    
    <caption>Différents pays du monde</caption>

    <colgroup>
        <col class="stuff" />
        <col />
        <col class="stuff" />
    </colgroup>

    <thead>
        <tr>
            <th>Pays<br />(forme courte)</th>
            <th>Capitale</th>
            <th>Continent</th>
            <th>Monnaie</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Luxembourg</td>
            <td>Luxembourg</td>
            <td>Europe</td>
            <td>Euro (EUR)</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>Ottawa</td>
            <td>Amérique</td>
            <td rowspan="2" class="aligntop">Dollar (USD/AUD)</td>
        </tr>
        <tr>
            <td>Australie</td>
            <td>Canberra</td>
            <td>Océanie</td>
        </tr>
    </tbody>

</table>

<table>
    
    <caption>Langues officielles</caption>

    <colgroup>
        <col class="stuff" />
        <col />
        <col class="stuff" />
    </colgroup>

    <thead>
        <th>Pays</th>
        <th>Langues</th>
    </thead>

    <thead>
        <tr>
            <td>Belgique</td>
            <td>Français, Allemand, Flamand</td>
        </tr>
        <tr>
            <td>Irlande</td>
            <td>Anglais, Irlandais</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>Anglais, Français</td>
        </tr>
    </thead>

</table>

CSS

body { padding: 30px; font-family: "Lucida Sans"; font-size: 12px; counter-reset: tbl; }
table { margin-top: 25px; border-collapse: collapse; }
caption { margin-top: 0.5em; color: rgba(0,0,0,0.5); caption-side: bottom; counter-increment: tbl; }
caption:before { content: "Tabl. " counter(tbl) " – "; font-weight: bold; }

td,
th {
    border: 1px solid #000;
    padding: 0.5em;
}

th { background-color: pink; font-weight: bold; vertical-align: bottom; }

td { vertical-align: middle; }
th { border-bottom: double; }

.stuff {
    background-color: rgba(255, 192, 203, 0.23);
}

.premier {
    width: 420px;
    table-layout: fixed;
}