# 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](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/estilizar-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

Dica Está começando a aprender HTML? Confira nosso tutorial HTML para iniciantes e inicie sua jornada com o pé direito!

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

Dica Quer criar uma tabela HTML sem ter que adicionar manualmente as linhas e células? Ferramentas como o [HTML Table Generator](https://divtable.com/generator/ "HTML Table Generator - divtable.com") podem ajudar a simplificar o processo de criação de tabelas.

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

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

[![Imagem: Exemplo de Tabela HTML](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/0/9/csm_exemplo-tabela-html_b65946d2be.webp "Exemplo de Tabela HTML")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemplo-tabela-html.png) O layout real da tabela depende das instruções CSS em cada projeto web. ## 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](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-entities/). Caso algum desses caracteres apareça na sua tabela, substitua-o pela sequência correspondente:

<table>
  <thead>
    <tr>
      <th>Caractere especial</th>
      <th>Entidade HTML</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`<`</td>
      <td>`&lt;`</td>
    </tr>
    <tr>
      <td>`>`</td>
      <td>`&gt;`</td>
    </tr>
    <tr>
      <td>`&`</td>
      <td>`&amp;`</td>
    </tr>
    <tr>
      <td>`"`</td>
      <td>`&quot;`</td>
    </tr>
    <tr>
      <td>`'`</td>
      <td>`&apos;`</td>
    </tr>
  </tbody>
</table>


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/table-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/table-html/) for AI/LLM consumption.