Matricule-se
Voltar para o blog
HTML e CSS

Entenda o que é uma tabela em HTML e como criar com exemplos práticos

Heitor Catunda

Criar uma tabela em HTML, ou HTML Table, é uma tarefa comum, mas indispensável para organizar dados de maneira clara e acessível.

Se você deseja criar tabelas eficientes para o seu site ou da sua empresa? Pois isso é mais simples do que parece!

Neste artigo, vamos explorar desde os conceitos básicos até técnicas mais avançadas, como a aplicação de CSS e práticas de acessibilidade. 

Você aprenderá a criar tabelas simples e avançadas com exemplos práticos de código, e tudo o que é necessário para que suas informações sejam apresentadas de maneira eficaz na web. 

Se você deseja aprimorar suas habilidades em HTML e garantir que seus dados sejam visualmente atraentes e funcionais, continue com a gente!

Uma tabela em HTML é uma estrutura que organiza dados em linhas e colunas usando a tag <table>. Ela é montada com <tr> (linhas), <th> (células de cabeçalho) e <td> (células de dados). É indicada para exibir dados tabulares — como preços, horários ou comparativos — e pode ser estilizada com CSS.

O que é uma tabela em HTML?

Uma tabela em HTML é uma estrutura usada para organizar dados em linhas e colunas, facilitando a apresentação de informações de forma clara. 

Ideal para exibir listas, relatórios ou dados tabulares em sites, ela é criada com elementos específicos do HTML, como <table>, <tr> e <td>. 

Embora tabelas já tenham sido usadas para layouts de páginas, essa prática foi substituída por ferramentas modernas, como CSS Grid e Flexbox. 

Hoje, as tabelas são focadas na organização de dados, sendo práticas e rápidas de implementar. 

Qual a importância da tabela para o HTML?

A HTML Table é essencial para exibir dados de maneira organizada, clara e eficiente na web. 

Ela permite estruturar informações em linhas e colunas, sendo ideal para criar relatórios, listas e estatísticas. 

Além de facilitar a leitura pelos usuários, as tabelas são úteis para ferramentas de busca e acessibilidade, melhorando a experiência geral do site. 

Combinadas com CSS, elas podem ser estilizadas para se adaptar ao design da página. 

Embora existam outras ferramentas para layouts, as tabelas permanecem indispensáveis quando o objetivo é apresentar dados tabulares de forma estruturada. 

Isso faz delas um recurso indispensável para desenvolvedores e criadores de conteúdo.

Qual a estrutura básica de uma tabela em HTML?

Pessoa no notebook trabalhando com tabela em html

A estrutura básica de uma tabela em HTML é formada pelos elementos <table>, <tr> e <td>.

O elemento <table> define a tabela, enquanto <tr> representa cada linha. Dentro de cada linha, usamos <td> para criar as células, que formam as colunas automaticamente. 

Para melhorar a organização, é possível adicionar um cabeçalho com <th>, que funciona como uma célula, mas com destaque visual.

Veja um exemplo:

HTML
<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
  </tr>
</table>

Esse código cria uma tabela com duas colunas: “Nome” e “Idade”, e duas linhas de dados.

Quais são os atributos da tabela em HTML?

Os atributos ajudam a personalizar o comportamento e a aparência da tabela. Alguns comuns são:

  • border: Define a borda da tabela.
  • cellpadding: Adiciona espaço interno nas células.
  • cellspacing: Define o espaço entre as células.
  • width e height: Ajustam o tamanho da tabela.
  • align: Alinha a tabela no espaço disponível (pode ser “left”, “right” ou “center”).

Esses atributos podem ser aplicados diretamente no elemento <table>, mas é mais recomendado usar CSS para estilização.

Quais são as propriedades da tabela em HTML?

As propriedades de uma tabela em HTML são usadas em CSS para personalizar a aparência. Algumas das mais usadas incluem:

  • border-collapse: Controla como as bordas são exibidas, podendo uni-las ou separá-las.
  • text-align: Alinha o texto dentro das células.
  • padding: Define o espaço interno das células.
  • background-color: Altera a cor de fundo.
  • width e height: Ajustam o tamanho das células ou da tabela.

Essas propriedades permitem criar tabelas estilizadas e mais atraentes visualmente. Com CSS, você tem total controle sobre o design da tabela!

Quando usar tabelas em HTML?

Tabelas em HTML devem ser usadas para organizar e apresentar dados tabulares, ou seja, informações estruturadas em linhas e colunas. 

Elas são perfeitas para exibir relatórios, listas de preços, horários ou qualquer tipo de dado que precise ser comparado ou visualizado de forma clara. 

A tabela foi projetada para facilitar a leitura e a compreensão de informações organizadas. 

Além disso, são especialmente úteis quando a apresentação dos dados precisa de cabeçalhos, células bem definidas e organização visual. 

Sempre que você quiser exibir dados tabulados no seu site, as tabelas HTML são uma solução prática e eficiente.

E quando não usar?

Não use tabelas em HTML para criar layouts ou diagramar páginas. Essa prática, comum no passado, dificulta a acessibilidade, gera códigos desorganizados e prejudica a responsividade. 

Para criar layouts, utilize CSS com ferramentas modernas como Grid e Flexbox, que são mais adequadas. 

Além disso, tabelas usadas para estruturação de páginas podem confundir leitores de tela, usados por pessoas portadoras de deficiência visual, afetando a experiência de usuários.

Aposte em elementos como <div>, <header> e <section> para layouts responsivos e acessíveis, mantendo o código mais limpo e eficiente. 

Tabelas são ideais apenas para dados tabulares.

Veja também: 

Ícone HTML e CSSHTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agoraSeta para a direita
Fundo HTML e CSSTelas HTML e CSS

Como criar uma tabela em HTML?

Tela do computador com tabela em html

Criar uma tabela em HTML é simples e começa com o uso das tags <table> e </table>, que indicam o início e o fim da tabela. 

Para estruturar linhas, usamos <tr>, e para as células, <td>. Se quiser adicionar cabeçalhos, use <th>. 

Essa é a base para qualquer tabela, mas é possível adicionar elementos e personalizações para deixar a tabela mais funcional e visualmente atraente. 

Nos próximos tópicos, veremos como criar uma tabela básica e também avançar com recursos como colunas mescladas e estilos CSS.

Tabela básica

Uma tabela básica em HTML é composta pelas tags fundamentais:

HTML
<table border="1">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
  </tr>
</table>

No exemplo acima:

  • <table> cria a tabela.
  • <tr> define as linhas.
  • <th> são os cabeçalhos.
  • <td> são as células.

O atributo border adiciona bordas simples para melhorar a visualização.

Tabela avançada

Para tabelas avançadas, você pode mesclar células e aplicar estilos com CSS.

Exemplo com mesclagem de células:

HTML
<table border="1">
  <tr>
    <th colspan="2">Dados Pessoais</th>
  </tr>
  <tr>
    <td>Nome</td>
    <td>Maria</td>
  </tr>
  <tr>
    <td>Idade</td>
    <td>30</td>
  </tr>
</table>

Aqui, o atributo colspan=”2″ mescla duas colunas na primeira linha.

Exemplo com CSS para estilização:

HTML
<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid #ddd; padding: 8px;">Nome</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Idade</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Maria</td>
    <td style="border: 1px solid #ddd; padding: 8px;">30</td>
  </tr>
</table>

Com CSS, você pode ajustar bordas, espaçamentos, cores e até deixar sua tabela responsiva. A seguir, veja mais dicas de como estilizar as tables com CSS!

Saiba mais: Veja o que são Tags HTML, tipos mais usados e exemplos práticos

Como estilizar as tabelas em HTML usando o CSS? 5 dicas

Estilizar tabelas em HTML usando CSS deixa o layout mais atraente e organizado. Como vimos, o CSS permite personalizar bordas, cores, alinhamentos e muito mais. 

Veja agora algumas formas de aplicar estilos às tabelas:

1. Adicionando bordas e espaçamentos

Use border-collapse para ajustar as bordas das células e padding para adicionar espaçamento interno.

HTML
<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid #ddd; padding: 8px;">Nome</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Idade</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Maria</td>
    <td style="border: 1px solid #ddd; padding: 8px;">30</td>
  </tr>
</table>

2. Aplicando cores alternadas às linhas

Destaque linhas usando nth-child para facilitar a leitura.

HTML
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
  </tr>
</table>

3. Personalizando cabeçalhos

Você pode destacar os cabeçalhos com cores e fontes diferentes.

CSS
<style>
  th {
    background-color: #4CAF50;
    color: white;
    text-align: left;
    padding: 10px;
  }
</style>

4. Estilizando bordas arredondadas

Para um visual moderno, use border-radius.

CSS
<style>
  table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
  }
</style>

5. Tornando a tabela responsiva

Adicione overflow-x para ajustar a tabela em telas menores.

HTML
<style>
  .table-responsive {
    overflow-x: auto;
  }
</style>
<div class="table-responsive">
  <table>
    <!-- Conteúdo da tabela -->
  </table>
</div>

Com essas técnicas, você consegue transformar tabelas simples em componentes elegantes e funcionais para qualquer projeto web.

Como resolver as questões de acessibilidade das tabelas em HTML?

Pessoa no notebook programando com tabela em html

Acessibilidade em tabelas HTML é essencial para garantir que todos os usuários possam navegar e entender os dados. 

Para melhorar a acessibilidade, siga estas práticas:

  1. Use a tag <caption>: Adicione uma descrição para a tabela, facilitando a compreensão. Exemplo: <caption>Tabela de Idades</caption>
  2. Defina o cabeçalho com <th>: Marque os cabeçalhos das colunas para que os leitores de tela possam interpretá-los corretamente.
  3. Associe cabeçalhos a células: Use o atributo scope para indicar se o cabeçalho é para a linha ou coluna. Exemplo: <th scope=”col”>Nome</th>
  4. Evite tabelas para layout: Como dito anteriormente, use tabelas apenas para dados tabulares. Evite usá-las para organizar o layout, pois isso pode prejudicar a navegação.

Essas medidas melhoram a experiência dos usuários e tornam sua tabela mais acessível.

Como usar CSS para melhorar a acessibilidade em tabelas?

Para melhorar a acessibilidade das tabelas em HTML, o CSS pode ser uma ferramenta poderosa. 

Em primeiro lugar, garanta que o texto tenha contraste suficiente com o fundo. Isso é importante para leitores portadores de deficiências visuais.

Utilize cores que proporcionem contraste alto entre o texto e o fundo, como:

CSS
table {
    color: #000000;
    background-color: #ffffff;
}

Depois, pense na responsividade. Use @media queries para tornar as tabelas acessíveis em dispositivos móveis. 

Em telas pequenas, as tabelas podem se tornar difíceis de ler, por isso você pode fazer com que a tabela role horizontalmente:

CSS
@media screen and (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

Também busque facilitar a navegação com o teclado, destacando as células ativas. Para isso, você pode usar focus e outline para isso:

CSS
td:focus, th:focus {
    outline: 2px solid #4CAF50;
}

O próximo passo é aumentar o espaçamento entre as células para melhorar a leitura e tornar a tabela mais clara:

CSS
table {
    border-spacing: 10px;
}
td, th {
    padding: 10px;
}

Essas técnicas são apenas o começo. Se você quiser aprender mais sobre como usar o CSS para criar sites acessíveis e responsivos, considere se aprofundar em um curso de CSS, onde você poderá explorar essas e outras práticas avançadas.

Onde posso treinar HTML e CSS?

Existem várias maneiras de treinar HTML e CSS, dependendo do seu nível de conhecimento e objetivo. 

No GitHub, você pode encontrar repositórios públicos com projetos práticos para testar e aprender. 

Além disso, no blog e no canal no YouTube da Hashtag Treinamentos, você encontra tutoriais e exemplos de código para treinar. 

Mas, para quem busca um aprendizado mais completo, o curso de HTML & CSS da Hashtag Treinamentos oferece uma jornada desde o básico até o avançado, com exemplos aplicados ao mercado de trabalho. 

Além disso, ao longo do curso, nossos alunos aprendem a desenvolver diversos projetos completos, que facilitam o aprendizado de forma prática. 

Pronto para dominar HTML e CSS e começar a criar projetos incríveis? Inscreva-se agora no nosso curso e comece a construir seu portfólio com projetos reais!

Perguntas frequentes sobre tabela em HTML

1. O que é uma tabela em HTML?

É um elemento que organiza informações em linhas e colunas dentro de uma página web. Criada com a tag <table>, serve para exibir dados estruturados de forma clara, como tabelas de preços ou horários.

2. Quais tags criam uma tabela em HTML?

As principais são <table> (a tabela), <tr> (cada linha), <th> (células de cabeçalho, em negrito) e <td> (células de dados). Também há <thead>, <tbody> e <caption> para estruturar melhor.

3. Como estilizar uma tabela em HTML com CSS?

Com CSS você define bordas (border), espaçamento interno (padding), cores alternadas nas linhas (nth-child), cabeçalhos destacados e bordas arredondadas. Também é possível torná-la responsiva para telas menores.

4. Quando não usar tabelas em HTML?

Tabelas devem ser usadas apenas para dados tabulares, nunca para montar o layout da página — para isso, o correto é usar CSS (Flexbox ou Grid). Usar tabela como layout prejudica a acessibilidade e a responsividade do site.

Conclusão

As tabelas em HTML são essenciais para organizar e exibir dados de forma clara em páginas web. 

Ao longo deste artigo, você aprendeu como criar tabelas básicas e avançadas, além de como estilizar e garantir acessibilidade. 

Agora que você tem as informações necessárias, pode começar a aplicar esses conhecimentos em seus projetos. Se esse guia foi útil, veja também como criar uma landing page com nosso curso de HTML e CSS!

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes de HTML e CSS

Posts mais recentes da Hashtag Treinamentos

Heitor Catunda

Autor do artigo

Heitor Catunda

Gerente de Operações e Especialista em Excel

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.

Ver mais posts