HTML5 tables - subdivide column

Question

I need to sweat the TD of the Steps and Circuits columns into two parts. The idea is that the word "Steps" appears in the TH and the values inserted in this column will be divided into <30 and > 30.

 Etapas
<30   >30
 1      2
 5      6

How do I do this subdivision semantically? I’m using bootstrap to make the layout.

<div>
    <table>
        <thead>
            <tr>
                <th>
                    Fase
                </th>

                <th>
                    Descricão
                </th>
                <th>
                    Etapas
                </th>
                <th>
                    Circuitos
                </th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

You must use the colspan and rowspan to merge the columns you need, and create a <tr> for column subheadings. Something similar to this:

<div>
    <table border="1px">
        <thead>
            <tr>
                <th rowspan="2">Fase</th>
                <th rowspan="2">Descricão</th>
                <th colspan="2">Etapas</th>
                <th rowspan="2">Circuitos</th>
            </tr>
            <tr>
                <th>>30</th>
                <th><30</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>valores > 30</td>
                <td>valores < 30</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</div>

Explanation of the solution:

• We extend the title cells that do not contain subtitle in 2 rowspan, that is, we inform that this cell will occupy the space of 2 Rows;
• We extend the title cells that contain the subtitle to the the amount of subtitles he will have, in our case 2 colspan, or be, we inform that this cell will occupy the space of 2 Columns;
• Finally, we create a new Row (<tr>) to the subtitles, where it will go allocate themselves into Columns which were not occupied by rowspan, in our if 3° and 4° columns;

Concepts:

• colspan: This attribute contains a non-negative integer value which indicates in how many columns the cell extends. Its default value is 1; if its value is set to 0, this extends to the end of the , eventually defined implicitly, the cell belongs. Values greater than 1000 are truncated up to 1000. *¹
• rowspan: This attribute contains a non-negative integer value which indicates on how many lines the cell extends. Its default value is 1; if its value is set to 0, this extends to the end of the section of table (<thead>, <tbody>, <tfoot>, eventually implicitly defined) the cell belongs. Values greater than 65534 are truncated down to 65534. *¹

^{*¹Translation of the definition of rowspan and colspan of MDN. Source.}

Answer 2

You must use the colspan merging 2 or more columns:

<div>
    <table border="1px">
        <thead>
            <tr>
                <th>Fase</th>
                <th>Descricão</th>
                <th colspan="2">Etapas</th>
                <th colspan="2">Circuitos</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>< 30</td>
                <td>> 30</td>
                <td>< 30</td>
                <td>> 30</td>
            </tr>
        </tbody>
    </table>
</div>