Table HTML: Criar tabelas em HTML

Você pode usar a tag <table> HTML em qualquer lugar das suas páginas para inserir tabelas que estruturam as informações de forma clara. Ao definir as células de cabeçalho, linhas e células de dados, você pode personalizar como elas serão organizadas.

O que é tabela HTML e para que ela serve?

Uma tabela HTML é um elemento estruturado em HTML, usado para exibir dados e textos em formato tabular. Para definir e estruturar uma tabela, diferentes tags HTML são necessárias. O design e o estilo de uma tabela HTML é configurado separadamente, por meio de instruções CSS.

Tabelas HTML oferecem funções de tabelas tradicionais: elas organizam as informações em linhas (horizontalmente) e colunas (verticalmente). Por isso, tabelas são uma alternativa às listas, sendo ideais para exibir os seguintes tipos de conteúdo:

• Calendários
• Contatos
• Rankings
• Horários
• Listas de preços
• Comparação de produtos
• Estatísticas

Tags para tabelas HTML

Para criar uma tabela HTML, você sempre precisará de pelo menos três tags diferentes, emboraa tag <th> para cabeçalhos 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 fechamento.
• <td>: A tag <td> significa “Table Data” (dados da tabela). Para cada tag <td>, uma célula de tabela é gerada, formando uma coluna. As informações são inseridas entre a tag de abertura <td> e a tag de fechamento </td>.
• <th>: A tag <th>, como já mencionada, é uma forma especial da tag <td>. Ela é tipicamente 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 apresentar um exemplo simples de tabela HTML. Neste caso, descriçõ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 informaçõ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

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

• Legibilidade: 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 cabeçalhos, dispensando-os apenas se eles forem absolutamente irrelevantes para a compreensão das informações.
• Exibição em dispositivos móveis: Em smartphones e tablets, tabelas HTML comuns geralmente não são exibidas da forma mais adequada. Para garantir que suas tabelas possam ser visualizadas em dispositivos móveis, é importante usar instruções CSS específicas para design responsivo.
• Uso de tabelas como elemento de layout: No passado, tabelas HTML eram frequentemente 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 inconsistentes: Quando você insere uma tabela com valores numéricos, é fácil cometer o erro de não inserir ou usar unidades erradas. Certifique-se de manter a consistência das unidades para evitar confusões.

Outro problema comum na criação de tabelas HTML é a exibição de caracteres especiais. Como esses caracteres têm significados reservados em HTML, eles podem causar erros de exibição. Os caracteres <, >, &, ", e ', por exemplo, costumam causar erros. A solução é usar entidades HTML. Caso algum desses caracteres apareça na sua tabela, substitua-o pela sequência correspondente: