HTML: guia sobre tabelas

Neste tutorial, você aprenderá a exibir dados tabulares usando tabelas HTML.

Criar tabelas em HTML

As tabelas HTML permitem organizar os dados em linhas e colunas. Eles são frequentemente usados ​​para exibir dados tabulares, como listagens de produtos, detalhes de clientes, relatórios financeiros, etc.

Você pode usar o elemento <table> para criar tabelas. Dentro do elemento <table>, você pode usar o elemento <tr> para criar linhas, e dentro da linha, você pode usar o elemento <td>. Você também pode usar o elemento <th> para definir uma célula como o título de um grupo de células da tabela.

O exemplo a seguir demonstra a estrutura mais básica de uma tabela.

<table>
    <tr>
        <th>Número</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>João Paulo</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Carlos Barbosa</td>
        <td>34</td>
    </tr>
</table>

Por padrão, as tabelas não têm bordas. Você pode adicionar bordas a tabelas usando propriedades de borda CSS. Além disso, por padrão, as células da tabela são dimensionadas exatamente para caber no conteúdo. Para adicionar mais espaço ao redor do conteúdo de uma célula da tabela, você pode usar a propriedade CSS de preenchimento.

As regras de estilo a seguir adicionam uma borda de 1 pixel à sua tabela e um preenchimento de 10 pixels às suas células.

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

Por padrão, as bordas ao redor de uma tabela e suas células são separadas umas das outras. Mas você pode recolhê-los um por um usando a propriedade border-collapse no elemento <table>.

Além disso, o texto dentro do elemento <th> está em negrito e, por padrão, alinhado horizontalmente no centro da célula. Para alterar o alinhamento padrão, você pode usar a propriedade CSS text-align.

As regras de estilo a seguir recolhem as bordas da tabela e alinham o texto do cabeçalho da tabela à esquerda.

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}

Nota: A maioria das propriedades do elemento <table> como borda, preenchimento de célula, espaçamento de célula, largura, alinhamento, etc. Os estilos de aparência de tabela de versões anteriores foram removidos do HTML5, portanto, evite usá-los. Use CSS para estilizar tabelas HTML.

Abrangendo várias linhas e colunas

A abrangência permite estender linhas e colunas da tabela para várias linhas e colunas.

Em geral, uma célula da tabela não pode ser movida para o espaço abaixo ou acima de outra célula da tabela. Mas você pode usar os atributos rowspan ou colspan para abranger várias linhas ou colunas em uma tabela.

Vamos tentar o seguinte exemplo para entender como o colspan funciona basicamente:

<table>
    <tr>
        <th>Nome</th>
        <th colspan="2">Telefone</th>
    </tr>
    <tr>
        <td>Ricardo Maia</td>
        <td>88981868547</td>
        <td>11982636578</td>
    </tr>
</table>

Da mesma forma, você pode usar a propriedade rowspan para criar células que abrangem várias linhas. Vamos tentar um exemplo para entender como as linhas divididas funcionam:

<table>
    <tr>
        <th>Nome:</th>
        <td>Ricardo Maia</td>
    </tr>
    <tr>
        <th rowspan="2">Telefone:</th>
        <td>88981868547</td>
    </tr>
    <tr>
        <td>11982636578</td>
    </tr>
</table>

Adicionar uma legenda à tabela

Você pode usar o elemento <caption> para especificar um título (ou títulos) para a tabela.

Este elemento deve ser colocado diretamente após a tag de abertura <caption>. O título é exibido na parte superior da tabela por padrão, mas você pode alterar sua posição usando a propriedade CSS do lado do título.

O exemplo a seguir mostra como usar esse elemento em uma tabela.

<table>
    <caption>Informações dos Usuários</caption>
    <tr>
        <th>Número</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Ana Patrícia</td>
        <td>18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Elias Laurent</td>
        <td>31</td>
    </tr>
</table>

Definindo um cabeçalho, corpo e rodapé de tabela

HTML fornece uma série de tags <thead>, <tbody> e <tfoot> que ajudam a criar tabelas mais estruturadas definindo áreas de cabeçalho, corpo e rodapé, respectivamente.

O exemplo a seguir demonstra o uso desses elementos.

<table>
     <thead>
         <tr>
             <th>Itens</th>
             <th>Despesas</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>Calçados</td>
             <td>2.000</td>
         </tr>
         <tr>
             <td>Móveis</td>
             <td>10.000</td>
         </tr>
     </tbody>
     <tfoot>
         <tr>
             <th>Total</th>
             <td>12.000</td>
         </tr>
     </tfoot>
</table>

Nota: Em HTML5, o elemento <tfoot> pode ser colocado antes ou depois dos elementos <tbody> e <tr>, mas deve aparecer depois de qualquer elemento <caption>, <colgroup> e <thead>.

Dica: não use tabelas para criar layouts de página. Os layouts de tabela são lentos para renderizar e difíceis de manter. Deve ser usado apenas para exibir dados tabulares.

Leia também: 8 maneiras de monetizar seu blog