HTML5 - Principais insights sobre tabelas

Neste artigo, aprenderemos sobre tabelas em HTML.

As tabelas desempenham um papel crucial na apresentação eficaz de dados tabulares estruturados, nos quais as informações são logicamente organizadas em linhas e colunas. No entanto, é imperativo enfatizar que as tabelas nunca devem ser usadas para ditar o layout ou a estrutura de uma página da web. O design web moderno depende de técnicas mais versáteis e responsivas, como CSS grid, flexbox e elementos HTML semânticos. Esses métodos permitem a criação de layouts de página visualmente atraentes e adaptáveis, garantindo uma experiência do usuário perfeita. Utilizar tabelas para fins de layout pode introduzir problemas relacionados à acessibilidade, responsividade e manutenção de designs web. Portanto, embora as tabelas se destaquem na organização de dados, elas não são adequadas para definir a estrutura mais ampla de uma página da web.

Lembre-se de que uma tabela se parece com esta:

Observe que temos um cabeçalho de tabela e três linhas (linhas), cada linha com duas células.

Em HTML, temos:

• um elemento para a tabela, chamado table;
• um elemento para o cabeçalho da tabela, o grupo de células que formam o cabeçalho, chamado thead;
• um elemento para a célula do cabeçalho da tabela, chamado th;
• um elemento para o corpo da tabela, o grupo de linhas e células que formam o corpo da tabela, chamado tbody;
• um elemento para o rodapé da tabela, o grupo de células que formam o rodapé, chamado tfoot. Este elemento é totalmente opcional.
• um elemento para cada linha, chamado tr;
• um elemento para célula (dados da tabela), chamado td;

Veja o código abaixo:

<table>
    <tr>
        <td>Filme</td>
        <td>Avaliação IMDB</td>
    </tr>
    <tr>
        <td>Interstellar</td>
        <td>8.4</td>
    </tr>
    <tr>
        <td>O Grande Truque</td>
        <td>8.5</td>
    </tr>
    <tr>
        <td>Efeito Borboleta</td>
        <td>7.6</td>
    </tr>
</table>

Este código se parece com isto:

Cabeçalho da Tabela

A primeira linha não parece um cabeçalho de tabela, você concorda?

Para corrigir isso, precisamos usar os elementos thead e th, como neste novo exemplo:

<table>
    <thead>
        <th>Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este código se parece com isso:

Borda da Tabela

Observe que não há uma borda; para adicionar uma borda, usamos um atributo chamado border ou, se você desejar fazer a coisa certa, use CSS.

<table border="1">
    <thead>
        <th>Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este código se parece com isso:

Estilizando Tabelas

Agora temos bordas, mas a borda parece ruim. Para uma boa aparência, podemos usar os atributos cellspacing e cellpadding. Cellspacing controla o espaço entre a célula e o restante da tabela, e cellpadding controla o espaço entre os dados da célula e a borda da célula.

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th>Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Agora, a tabela se parece com isso, muito melhor, você sabe?:

Lembre-se: a estilização é feita com CSS.

Mesclando Células da Tabela

Às vezes, precisamos mesclar células em uma tabela, como fazemos no Excel (ou em outro editor de planilha). Portanto, se você precisar mesclar células, pode usar colspan ou rowspan para isso. Veja o exemplo abaixo. Observe que adiciono o atributo colspan no elemento th, mas é possível adicionar colspan no elemento td, porque colspan é adicionado no elemento da célula e mescla as células horizontalmente, lado a lado. Portanto, a primeira e a segunda célula do cabeçalho são combinadas como uma única célula.

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th colspan="2">Informações do Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>Ficção Científica</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>Drama</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>Ficção Científica</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este código se parece com a imagem abaixo.

Como mencionado, também é possível mesclar células verticalmente com o atributo rowspan.

Cabeçalho de Coluna e Linha da Tabela

Até aqui, tínhamos apenas um cabeçalho na primeira linha, mas é possível ter um cabeçalho na primeira coluna usando a célula th. Veja o exemplo abaixo:

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th>Filme</th>
        <th>Gênero</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>Ficção Científica</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>Drama</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>Ficção Científica</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este exemplo se parece com isto:

Outras Considerações Sobre Tabelas

Existem os elementos colgroup e col, mas eu não recomendo usá-los, pois eles são para estilização, e como sabemos, a estilização é feita com CSS. É mais comum estilizar tabelas com CSS em vez de usar colgroup.

Tabelas com div e span

Sim, você leu corretamente. É possível criar tabelas usando divs ou outros elementos de bloco, mas a div se comportará como uma tabela para acessibilidade, embora com menos semântica. Nesse caso, é essencial organizar o layout da tabela com CSS.

Para isso, você deve usar o atributo role e Aria Role

Veja o exemplo abaixo:

<div role="table" aria-label="Informações do Filme">
    <div role="rowgroup">
        <div role="row">
            <span role="columnheader" aria-colspan="2">Informações do Filme</div>
            <span role="columnheader">Avaliação IMDB</div>
        </div>
    </div>
    <div role="rowgroup">
        <div role="row">
            <span role="cell">Interstellar</span>
            <span role="cell">Ficção Científica</span>
            <span role="cell">8.4</span>
        </div>
        <div role="row">
            <span role="cell">O Grande Truque</span>
            <span role="cell">Drama</span>
            <span role="cell">8.5</span>
        </div>
        <div role="row">
            <span role="cell">Efeito Borboleta</span>
            <span role="cell">Ficção Científica</span>
            <span role="cell">7.6</span>
        </div>
    </div>
</div>

Esse código será renderizado assim:

Observe que usamos div e span com o atributo role e seus valores:

• table: para toda a tabela;
• rowgroup: para o grupo de linhas, grupo de linhas de cabeçalho ou grupo de linhas de dados;
• columnheader: para o cabeçalho da coluna;
• row: para linhas;
• cell: para células;

Em detalhes:

• <div role="table" aria-label="Informações do Filme"> representa a tabela inteira com o atributo aria-label para acessibilidade.
• <div role="rowgroup"> agrupa as linhas, semelhante aos elementos thead e tbody.
• <div role="row"> representa cada linha.
• <div role="columnheader" aria-colspan="2"> representa o cabeçalho da tabela com aria-colspan indicando o colspan de 2.
• <div role="cell"> representa os dados da tabela.

Quando usar essa forma?

Ambas as formas, elemento table ou atributo role, funcionam quase igualmente, principalmente quando precisamos usar CSS para melhorar o layout e a aparência da tabela. No entanto, o elemento table é mais semântico, portanto, você deve preferir tabelas. Além disso, é melhor criar uma tabela com o atributo role para maior acessibilidade.

Lembre-se, o atributo de função é essencial para acessibilidade.

O Que Vem Pela Frente

Nos próximos artigos, você mergulhará nos formulários em HTML. Fique ligado!

Referências

• Mozilla Developer Network. HTML tables - Learn web development | MDN (Acessado em 25/09/2023)
• Stack Overflow. HTML tables vs. - Stack Overflow (Acessado em 25/09/2023)