Как создать таблицу с функцией диапазона на HTML

Question

Я хочу создать собственную таблицу, например, она должна иметь 6 столбцов и 10 строк. Как я могу сделать это на HTML?

до того, как я написал все своими руками, как это

МОЙ HTML КОД:

<div class="table_container">
        <div class="table">
            <div class="tr">
                <div class="th">th1
                </div>
                <div class="th">th2
                </div>
                <div class="th">th3
                </div>
                <div class="th">th4
                </div>
                <div class="th">th5
                </div>
                <div class="th">th6
                </div>
            </div>
            <div class="tr">
                <div class="td">td1
                </div>
                <div class="td">td2
                </div>
                <div class="td">td3
                </div>
                <div class="td">td4
                </div>
                <div class="td">td5
                </div>
                <div class="td">td6
                </div>
            </div>
        </div>
    </div>

МОЙ CSS КОД :

.table_container {

    display: block;
    position: relative;
    top: 350px;
    border: 1px solid black;
    margin: 0px 1.35%;
}

.table {

    /*width: auto;*/
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 12px;
    display: table;
    /*border: 1px solid black;*/
}

.tr {

    display: table-row;
}

.th {

    font-size: 22px;
    display: table-cell;
    font-weight: bold;
    background: grey;
    border-bottom: 1px solid black;
}

.td {

    display: table-cell;
}

но я хочу сделать больше строк и столбцов, так что, возможно, я могу использовать для l oop для этого, и я попытался, но это не сработало.

    <div class="table_container">
        <div class="table">
            <div class="tr">
                {% for i in range(10) %}
                    <div class="th"> {{ i }}
                    </div>
                {% endfor %}
            </div>
            <div class="tr">
                <div class="td">td1
                </div>
                <div class="td">td2
                </div>
                <div class="td">td3
                </div>
                <div class="td">td4
                </div>
                <div class="td">td5
                </div>
                <div class="td">td6
                </div>
            </div>
        </div>
    </div>

например, для 10 столбцов, но это не сработало. (просто для информации, я делаю свою таблицу с div, а не с тегами table, tr, th, td)

Кто-нибудь знает, как это работает, как я могу это сделать?