Creating a table using html. How to make the cells not move out?

I need to make a table like this in HTML.

Tried to do a normal layout, but any time I try to fix something, the table moves away…..

<style>
    table {
        border-collapse: collapse;
        width: 100%;
       }
    td,
    th {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
</style>

<table>
    <tbody>
        <tr>
            <td colspan="2" rowspan="2"></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

I tried to do it this way, but it’s all moving away..

I’ve also tried this, but I can’t merge the three cells that are crossed out, when I try to merge them, the table moves off to the side again.

You need to sign in to view this answers

Related Post