JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table>
    <caption>A test table with merged cells</caption>
    <theader>
        <tr>
            <th colspan="2">Average</th>
            <th rowspan="2">Red Eyes</th>
        </tr>
        <tr>
            <th>height</th>
            <th>weight</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <td>1.9</td>
            <td>0.003</td>
            <td>40%</td>
        </tr>
        <tr>
            <td>1.7</td>
            <td>0.002</td>
            <td>43%</td>
        </tr>
    </tbody>
</table>

CSS

caption {
    font-style: italic;
}

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