Tudo sobre Tecnologia da Informação

Dicas para Tabelas

Veja um exemplo de tabela em HTML:

<table>
    <caption>População das Unidades Federativas</caption>
    <thead>
        <tr>
            <th scope="col">Estado</th>
            <th scope="col">População</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>São Paulo</td>
            <td class="num">45.919.049</td>
        </tr>
        <tr>
            <td>Minas Gerais</td>
            <td class="num">21.168.791</td>
        </tr>
        <tr>
            <td>Rio de Janeiro</td>
            <td class="num">17.264.943</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">Total de Habitantes</th>
            <td class="num"><strong>210.147.125</strong></td>
        </tr>
    </tfoot>
</table>

Na tabela acima, o th é para títulos e vai no thead, as demais tags vão no tbody. O tfoot é o rodapé da tabela. O caption é o título.

E seu CSS:

table {
    width: 500px;
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    padding: 10px;
}

thead, tfoot {
    background-color: gray;
    color: white;
}

thead > tr > th { /* Pra fixar a cabeça */
    position: sticky;
    top: -1px;
    background-color: gray;
}

tbody > tr:nth-child(2n) { /* Ele intercala um elemento sim e outro não, no caso, pode ser também odd e even para par e impar */
    background-color: lightgray;
}

td.num {
    text-align: right;
}

caption {
    font-size: 1.5em; /* Equivale a 24px */
    font-weight: bold;
    padding: 10px;
    background-color: lightgray;
}

Os escopos são importantes, os parâmetros neles são col, row, colgroup e rowgroup (os dois últimos são para agrupamentos de células.

Outro exemplo, que mostra uma célula ocupando mais de uma linha ou coluna:

<table>
    <tr>
        <td>A</td>
        <td colspan="2">B</td> <!-- Ocupa duas colunas -->
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td rowspan="3">F</td> <!-- Ocupa três linhas -->
    </tr>
    <tr>
        <td>H</td>
        <td>I</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
    </tr>
</table>

Seu CSS:

table {
    border-collapse: collapse; /* Isso tira espaçamento entre as células */
    width: 300px;
}

td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

PS: Podemos colocar uma tag colgroup dentro da tabela para facilitar configurações em CSS, por exemplo:

<colgroup>
    <col class="cNome"/>
    <col class="cIdade"/>
</colgroup>

E no CSS:

col.cNome {
    background-color: lightgray;
}

PS: Podemos envelopar a tabela toda numa div para ela ficar responsiva. Esse é o CSS dele:

div#container {
    overflow-x: auto; /* Pode ser overflow-y também */
}