HTML5 - Principais insights sobre tabelas
Tags: webdev, beginners, html
Published: 2023-09-25 19:11:22

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:

| Filme              | Avaliação IMDB |
| ------------------- | ----------- |
| Interstellar       | 8.4         |
| O Grande Truque    | 8.5         |
| Efeito Borboleta   | 7.6         |

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:

```html
<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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4251lkv3huro63snd2i.png)



## 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:

```html
<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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88az4b1w3wibiubjjbgr.png)



## 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**.

```html
<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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e51s5ynw897v1wvopis.png)



## 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.

```html
<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?:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u19uxtzbj52iow9nobn7.png)


> 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.

```html
<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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fdbnkxvzjwinbfc4hyn.png)



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:

```html
<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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bze3rsaw8y62canc9ha.png)



## 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](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/Roles/table_role)

Veja o exemplo abaixo:

```html
<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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mummrc6wuexcrpihftf9.png)

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](https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Tables/Basics) (Acessado em 25/09/2023)
- [Stack Overflow. HTML tables <thead> vs. <th> - Stack Overflow](https://stackoverflow.com/questions/5395228/html-tables-thead-vs-th) (Acessado em 25/09/2023)