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>

Answer 2

.table {
    max-width: 700px;
    height: auto;
    margin: 20px auto;
    background-color: #edd;
    position: relative;
}

.table-head {
    display: flex;
    height: 150px;
}

.table-head-box {
    width: 25%;
    background-color: #000;
    border: 1px solid red;
    color: #fff;
}

.table-body {
    display: flex;
    flex-direction: row;
    height: 100%;
    height: 600px;
}

.table-body-left,
.table-body-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.table-body-left {
    width: 100%;
    height: 100%;
}
.table-body-right {
    width: 100%;
    height: 100%;
}

.table-head-box,
.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
    border: 1px solid blue;
}

.table-body-left-top,
.table-body-right-bottom {
    height: 70%;
    width: 100%;
}

.table-body-right-top,
.table-body-left-bottom{
    height: 30%;
    width: 100%;
}

<div class="table">
    <div class="table-head">
        <div class="table-head-box">A</div>
        <div class="table-head-box">B</div>
        <div class="table-head-box">C</div>
        <div class="table-head-box">D</div>
    </div>
    <div class="table-body">
        <div class="table-body-left">
            <div class="table-body-left-top">E,I,F,G</div>
            <div class="table-body-left-bottom">M,N</div>
        </div>
        <div class="table-body-right">
            <div class="table-body-right-top">G,H</div>
            <div class="table-body-right-bottom">K,O,L,P</div>
        </div>
    </div>
</div>