Como fazer uma tabela em HTML
Uma tabela é um elemento <table> formado por linhas (<tr>), e cada linha é formada por células: <th> para células de cabeçalho e <td> para células de dados.
A tabela não tem bordas próprias; a única regra CSS as adiciona para você ver as células. As colunas vêm das células: a primeira célula de cada linha é a coluna um, a segunda é a coluna dois, e assim por diante. Cada linha deve ter o mesmo número de células. Apague um <td> e aquela linha termina antes, deixando um buraco.
As células <th> ficam em negrito e centralizadas por padrão. Isso é só a aparência; o que importa é que elas são rótulos, que é o assunto da próxima seção.
Os elementos de tabela
| Elemento | O que é |
|---|---|
<table> | A tabela |
<caption> | O título da tabela, o primeiro filho de <table> |
<thead> | O grupo das linhas de cabeçalho |
<tbody> | O grupo das linhas do corpo (uma tabela pode ter vários) |
<tfoot> | O grupo das linhas de rodapé, como os totais |
<tr> | Uma linha |
<th> | Uma célula de cabeçalho |
<td> | Uma célula de dados |
<colgroup>, <col> | Colunas, para estilizar uma coluna inteira (larguras, fundo) |
As bordas estão em borda da tabela HTML, e as células que ocupam várias colunas ou linhas em colspan e rowspan.
Células de cabeçalho, scope e legenda
Uma tabela com cabeçalhos no topo e na lateral precisa dizer para que lado cada cabeçalho aponta. scope="col" nomeia a coluna abaixo, scope="row" nomeia a linha ao lado. <caption> dá à tabela um título visível:
Com essa marcação, um leitor de tela que chega à célula 14:00 pode anunciar "Saturday, Closes, 14:00", então o número nunca é lido sozinho. Numa tabela simples com uma linha de cabeçalho, os navegadores normalmente descobrem os cabeçalhos sem scope, mas escrever não custa nada e elimina o palpite.
A legenda também é o que o leitor de tela anuncia quando chega à tabela. Prefira-a a um título colocado acima da tabela, que não fica ligado a ela.
thead, tbody e tfoot
Os três grupos dividem as linhas em cabeçalho, corpo e rodapé. O rodapé é o lugar dos totais:
Dois detalhes deixam os números legíveis: text-align: end alinha as casas decimais (todo preço tem duas casas), e font-variant-numeric: tabular-nums dá a todos os dígitos a mesma largura.
Se você escreve <tr> direto dentro de <table>, como no primeiro exemplo, o navegador adiciona um <tbody> em volta das linhas mesmo assim. Por isso um seletor CSS como table > tr nunca encontra nada: na página, as linhas estão dentro de tbody. Use table tr, ou escreva o <tbody> você mesmo.
Estilizando uma tabela: zebrado, hover e largura
:nth-child alterna a cor das linhas, :hover destaca a linha sob o ponteiro e width: 100% estica a tabela pela largura do contêiner:
text-align: start alinha o texto do cabeçalho com os dados abaixo; sem isso, o th fica centralizado. start em vez de left mantém o alinhamento correto em idiomas da direita para a esquerda.
Tabelas responsivas que rolam
Uma tabela não consegue ficar mais estreita que o seu conteúdo. No celular, uma tabela larga empurra a página inteira para o lado. Envolva-a num contêiner que rola:
O contêiner está limitado a 300 pixels aqui para simular a tela de um celular; role-o para o lado. tabindex="0" permite que quem usa teclado coloque o foco no contêiner e role com as setas, e role="region" com um aria-label dá um nome a essa parada.
Tabelas são para dados
Use uma tabela quando o conteúdo tem mesmo linhas e colunas: preços, horários, comparações, resultados. Não use tabela para colocar coisas lado a lado na página. Tabelas de layout confundem os leitores de tela, que anunciam linhas e colunas sem sentido, e não se adaptam a telas pequenas. Layout se faz com flexbox e grid do CSS.
Erros comuns
- Linhas com números diferentes de células. As linhas curtas terminam antes e as colunas deixam de se alinhar.
- Usar
<td>com texto em negrito como cabeçalho. Use<th>para que os cabeçalhos sejam rótulos de verdade. - Os atributos obsoletos
border,cellpadding,cellspacing,bgcolorealign. Use CSS. - Colocar conteúdo direto em
<tr>ou<table>, fora de qualquer célula. Os navegadores o tiram da tabela, normalmente para cima dela. - Um título acima da tabela em vez de um
<caption>. table > trno CSS. O navegador inseriu um<tbody>; escrevatable troutbody tr.
Perguntas frequentes
Como criar uma tabela no HTML?
Envolva tudo em <table>, escreva um <tr> por linha e coloque as células dentro: <th> para células de cabeçalho e <td> para células de dados. Toda linha deve ter o mesmo número de células, a não ser que algumas ocupem várias colunas.
Qual a diferença entre th e td?
<th> é uma célula de cabeçalho que nomeia uma coluna ou linha, e <td> é uma célula de dados. Os navegadores mostram <th> em negrito e centralizado, e os leitores de tela leem o cabeçalho correspondente antes de cada célula de dados para que os números façam sentido.
Para que servem thead, tbody e tfoot?
Eles agrupam as linhas no cabeçalho, no corpo e no rodapé (totais) da tabela. Deixam a estrutura clara para as tecnologias assistivas, dão ao CSS algo para mirar e, quando uma tabela longa é impressa, os navegadores podem repetir o <thead> em cada página.
Por que minha tabela HTML não tem bordas?
Tabelas não têm bordas por padrão. Adicione com CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. O antigo atributo border="1" está obsoleto.
Como deixar uma tabela HTML responsiva?
Coloque a tabela num contêiner com overflow-x: auto. Numa tela estreita, a tabela rola para os lados dentro do contêiner em vez de alargar a página inteira.
