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:
<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!
Top comments (0)