How I create a table that way just like that anyway

Question

it must be pretty silly my problem the more I’m having trouble

https://i.stack.Imgur.com/0UI2c.png

Answer 1

Using colspan, if you intend that a column (<td>) specifies occupy the space equivalent to 3 columns then seven in the desired column <td colspan="3">, if it were to occupy the space of 4 columns would be <td colspan="4">

Example:

.tabela, .tabela td {
    border: 1px solid #000;
}

.tabela {
    border-collapse: collapse;
    width: 100%;
}

<table class="tabela">
    <tbody>
        <tr>
            <td colspan="3">Atendimento</td>
            <td colspan="3">Público</td>
        </tr>
        <tr>
            <td>Pres</td>
            <td>Tel</td>
            <td>Email</td>

            <td>Est</td>
            <td>Prof</td>
            <td>Out</td>
        </tr>
        <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>

            <td>SP</td>
            <td>Foo Bar</td>
            <td>Baz Bar</td>
        </tr>
    </tbody>
</table>

---

Note that I only used <tr> and <td>, but you can separate what is the "header" from the table and use TH, which would be more because of semantics (could also use combined with the attribute scope="", which might be interesting to combine a CSS to customize, but this is another story):

.tabela, .tabela td, .tabela th {
    border: 1px solid #000;
}

.tabela {
    border-collapse: collapse;
    width: 100%;
}

<table class="tabela">
    <thead>
        <tr>
            <th colspan="3">Atendimento</th>
            <th colspan="3">Público</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Pres</th>
            <th>Tel</th>
            <th>Email</th>

            <th>Est</th>
            <th>Prof</th>
            <th>Out</th>
        </tr>
        <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>

            <td>SP</td>
            <td>Foo Bar</td>
            <td>Baz Bar</td>
        </tr>
    </tbody>
</table>