Table HTML: Criar tabelas em HTML

Você pode usar a tag <table> HTML em qualquer lugar das suas páginas para inserir tabelas que es­tru­tu­ram as in­for­ma­ções de forma clara. Ao definir as células de cabeçalho, linhas e células de dados, você pode per­so­na­li­zar como elas serão or­ga­ni­za­das.

O que é tabela HTML e para que ela serve?

Uma tabela HTML é um elemento es­tru­tu­rado em HTML, usado para exibir dados e textos em formato tabular. Para definir e es­tru­tu­rar uma tabela, di­fe­ren­tes tags HTML são ne­ces­sá­rias. O design e o estilo de uma tabela HTML é con­fi­gu­rado se­pa­ra­da­mente, por meio de ins­tru­ções CSS.

Tabelas HTML oferecem funções de tabelas tra­di­ci­o­nais: elas organizam as in­for­ma­ções em linhas (ho­ri­zon­tal­mente) e colunas (ver­ti­cal­mente). Por isso, tabelas são uma al­ter­na­tiva às listas, sendo ideais para exibir os seguintes tipos de conteúdo:

• Ca­len­dá­rios
• Contatos
• Rankings
• Horários
• Listas de preços
• Com­pa­ra­ção de produtos
• Es­ta­tís­ti­cas

Tags para tabelas HTML

Para criar uma tabela HTML, você sempre precisará de pelo menos três tags di­fe­ren­tes, emboraa tag <th> para ca­be­ça­lhos de tabelas HTML seja opcional. Veja um resumo das tags:

• <table>: A tag HTML <table> é o elemento principal para criar uma tabela. O início da tabela é marcado pela tag <table>, e o fim é marcado pela tag </table>.
• <tr>: Para criar uma nova linha, usa-se a tag <tr>, que significa “Table Row” (linha da tabela). Cada linha precisa de uma tag de início e de fe­cha­mento.
• <td>: A tag <td> significa “Table Data” (dados da tabela). Para cada tag <td>, uma célula de tabela é gerada, formando uma coluna. As in­for­ma­ções são inseridas entre a tag de abertura <td> e a tag de fe­cha­mento </td>.
• <th>: A tag <th>, como já men­ci­o­nada, é uma forma especial da tag <td>. Ela é ti­pi­ca­mente usada para destacar as células de cabeçalho (“Table Header), mas também pode ser usada para destacar o primeiro item de uma linha.

Exemplo simples de tabela HTML

Para ilustrar como as tags funcionam, vamos apre­sen­tar um exemplo simples de tabela HTML. Neste caso, des­cri­ções e preços de três pratos. Na linha de cabeçalho, definimos os títulos das três colunas: “Prato”, “Descrição” e “Preço”. Em seguida, há mais três linhas com in­for­ma­ções. A tabela HTML terá, portanto, quatro linhas e três colunas:

<table>
<tr>
<th>Prato</th>
<th>Descrição</th>
<th>Preço</th>
</tr>
<tr>
<td>Espaguete à bolonhesa</td>
<td>Macarrão caseiro com molho de carne moída</td>
<td>R$ 45,00</td>
</tr>
<tr>
<td>Pizza Margherita</td>
<td>Pizza com molho de tomate, mussarela e manjericão fresco</td>
<td>R$ 40,00</td>
</tr>
<tr>
<td>Salada Caesar</td>
<td>Salada, peito de frango, croutons e molho Caesar</td>
<td>R$ 35,00</td>
</tr>
</table>

Na página web, a tabela ficará mais ou menos assim:

Close

Prin­ci­pais problemas e soluções de tabelas HTML

Ao criar tabelas HTML, alguns problemas típicos podem surgir. Eles podem ser evitados, contudo, se você tiver cuidado e atenção. Aqui estão os problemas mais comuns e as soluções adequadas:

• Le­gi­bi­li­dade: Tabelas podem ser difíceis de ler quando acessadas por usuários ou leitores de tela se não tiverem uma estrutura clara. Portanto, evite não usar ca­be­ça­lhos, dis­pen­sando-os apenas se eles forem ab­so­lu­ta­mente ir­re­le­van­tes para a com­pre­en­são das in­for­ma­ções.
• Exibição em dis­po­si­ti­vos móveis: Em smartpho­nes e tablets, tabelas HTML comuns ge­ral­mente não são exibidas da forma mais adequada. Para garantir que suas tabelas possam ser vi­su­a­li­za­das em dis­po­si­ti­vos móveis, é im­por­tante usar ins­tru­ções CSS es­pe­cí­fi­cas para design res­pon­sivo.
• Uso de tabelas como elemento de layout: No passado, tabelas HTML eram fre­quen­te­mente usadas no design gráfico de páginas web. Hoje em dia, você deve evitar isso e usar CSS para controlar o layout.
• Unidades ausentes ou in­con­sis­ten­tes: Quando você insere uma tabela com valores numéricos, é fácil cometer o erro de não inserir ou usar unidades erradas. Cer­ti­fi­que-se de manter a con­sis­tên­cia das unidades para evitar confusões.

Outro problema comum na criação de tabelas HTML é a exibição de ca­rac­te­res especiais. Como esses ca­rac­te­res têm sig­ni­fi­ca­dos re­ser­va­dos em HTML, eles podem causar erros de exibição. Os ca­rac­te­res <, >, &, ", e ', por exemplo, costumam causar erros. A solução é usar entidades HTML. Caso algum desses ca­rac­te­res apareça na sua tabela, substitua-o pela sequência cor­res­pon­dente: