HTML5 tables - subdivide column

You should use colspan and rowspan to merge the columns you need, and create a <tr> subhead for the subheadings of the columns. 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>

Explaining 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 subtitle for the amount of subtitling it will have, in our case 2 colspan , or we will inform you that this cell will occupy the space of 2 columns ;
• Finally, we create a new row ( <tr> ) for the subtitle, where it will to be allocated in columns that were not occupied by rowspan in our if the 3rd and 4th columns;

Concepts:

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

  

* ¹Translation of the definition of rowspan and colspan of the MDN. Font .

You should use colspan that merges 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>