JSFiddle - React, Tailwind, and code Playground

by alxers

HTML

<table>
    <tbody>
        <tr>
            <td colspan="3"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>
<br />
<table>
    <tbody>
        <tr>
            <td colspan="2"></td>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="4"></td>
            <td></td>
            <td rowspan="2" colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td> <!-- if I remove this "td" tag, row collapses for some reason -->
        </tr>
        <tr>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
    border-collapse: separate; /* as https://developer.mozilla.org says it's better to use border-collapse in css, cellpadding and cellspacing are both deprecated */
}
td {
    border: 1px solid black;
    width: 20px;
    height: 20px;
}