How to merge rows and columns in HTML table

Question

How can I create this table in HTML?

I have tried this code but it doesn't work as expected...

    <table>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr >
        <td rowspan="2" colspan="2">E,I, F, J</td>
        <td colspan="2">G,H</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">K,O, L, P</td>
    </tr>
    <tr>
        <td colspan="2">M, N</td>
    </tr>
</table>

Answer 1

table,tr,td
{
    border: 1px solid black;
    border-collapse: collapse;
    border-width: 0.1px;
    text-align: center;
}

<table border="1px" cellpadding="40" cellspacing="40" align="center">
        <colgroup>
            <col style="visibility: collapse;">
        </colgroup>

        <tr>
            <td>1</td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>

        <tr>
            <td>2</td>
            <td colspan="2" rowspan="2">E,I,F,G</td>
            <td colspan="2">G,H</td>
        </tr>

        <tr>
            <td>3</td>
            <td colspan="2" rowspan="2">K,O,L,P</td>
        </tr>

        <tr>
            <td>4</td>
            <td colspan="2">M,N</td>
        </tr>
    </table>