ایجاد table در html

سلام
شما میتونید با grid یا flex چنین layout را درست کنید.

    <section>
        <div class="table">
            <div class="col col-1"></div>
            <div class="col col-2">
                <div class="inner-table inner-table-2">
                    <div class="top-2">
                        <div></div>
                        <div class="right-2">
                            <div class="last-right-2">  
                                <div></div>
                                <div class="samll-table-2">
                                    <div></div>
                                    <div></div>
                                </div>  
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="bottom-2"></div>
                </div>
            </div>
            <div class="col col-3">
                <div class="inner-table inner-table-3"></div>
            </div>
            <div class="col col-4">
                <div class="inner-table inner-table-4">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </section>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

section {
    height: 100vh;
    width: 100%;
    display: grid;
    place-content: center;
}

.table {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    width: 1200px;
    height: 90vh;
}

.col {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(146, 146, 146);
}
.col-2, .col-3, .col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    border: 1px solid rgb(146, 146, 146);
}

.inner-table {
    border-left: 1px solid rgb(146, 146, 146); 
    border-right: 1px solid rgb(146, 146, 146); 
}

.inner-table-2{
    grid-area: 1 / 3 / 2 / 4;
    display: grid;  
    grid-template-rows: repeat(2, 1fr);
}

.inner-table-3{
    grid-area: 1 / 1 / 2 / 2;
}

.inner-table-4{
    grid-area: 1 / 2 / 2 / 3;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

.inner-table-4 div {
    border-top: 1px solid rgb(146, 146, 146); 
}

.inner-table-2 .top-2, .inner-table-2 .bottom-2{
    border-bottom: 1px solid rgb(146, 146, 146); 
    display: grid;  
    grid-template-columns: repeat(2, 1fr);
}

.inner-table-2 .top-2 .right-2{
    display: grid; 
    border-left: 1px solid rgb(146, 146, 146);   
    grid-template-rows: repeat(2, 1fr);
}
.right-2 .last-right-2{
    display: grid; 
    grid-template-columns: repeat(2, 1fr);  
    border-bottom: 1px solid rgb(146, 146, 146); 
}

.right-2 .last-right-2 .samll-table-2{
    display: grid; 
    border-left: 1px solid rgb(146, 146, 146);  
    grid-template-rows: repeat(2, 1fr);
}

.right-2 .last-right-2 .samll-table-2 div{
    border-top: 1px solid rgb(146, 146, 146); 
}