Как сделать такую таблицу на html?

Question

Как сделать такую таблицу, пробовал через colspan и rowspan, но так и не могу получить такую же

Answer 1

берите такое решение, если только через Table. Можно также попробовать через Grid

<!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <meta charset="UTF-8">
        <title>Index Site</title>
        <style>
            div{
                width: 50%;
                margin: 50px auto;
            }
            table{
                width: 300px;
                height: 100px;
                table-layout: fixed;
            }
            table tr th{
                width: 100%;
                height: 30px;
            }
            table td, th{
                border: 2px solid black;
            }
            .d_1{
                width: 10px;
                height: 30px;
            }
            .c_1{
                width: 1px;
                height: 30px;
            }
            .t_1{
                border: 0px;
            }
        </style>
    </head>
    <body>
        <div>
            <table cellspacing="0">
                <tr>
                    <th colspan="4">Comlex Table!</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td colspan="2" rowspan="2"></td>
                </tr>
                <tr>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Answer 2

CSS grid layout:

.table {
    border: 1px solid;
    display: inline-grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.box1 {
    border: 1px solid;
    grid-column: 1 / 5;
    grid-row: 1;
}

.box2 {
    border: 1px solid;
    grid-column: 1;
    grid-row: 2;
}

.box3 {
    border: 1px solid;
    grid-column: 2;
    grid-row: 2;
}

.box4 {
    border: 1px solid;
    grid-column: 3 / 5;
    grid-row: 2 / 4;
}

.box5 {
    border: 1px solid;
    grid-column: 1 / 3;
    grid-row: 3 / 5;
}

.box6 {
    border: 1px solid;
    grid-column: 3;
    grid-row: 4;
}

.box7 {
    border: 1px solid;
    grid-column: 4;
    grid-row: 4;
}

        <div class="table">
            <div class="box1"> box 1 </div>
            <div class="box2"> box 2 </div>
            <div class="box3"> box 3 </div>
            <div class="box4"> box 4 </div>
            <div class="box5"> box 5 </div>
            <div class="box6"> box 6 </div>
            <div class="box7"> box 7 </div>
        </div>

БЛОГ НА HUSL

Как сделать такую таблицу на html?

Ответы (2 шт):