Aprenda nessa aula como funcionam as tabelas. Saiba quais as tags você pode usar para criar tabelas no HTML.

É provável que em algum momento de sua vida você precisou usar o Excel para criar tabelas.

Tabela é um artifício muito eficaz para organizar informações em linhas e colunas de foma visual, tornando as informações fáceis de se entender.

No HTML podemos facilmente criar tabelas através da tag <table>.

Abaixo você pode ver um exemplo de tabela com 2 campos: Nome do aluno e nota. Nesses campos temos 3 registros (aluno + nota):

Esse código acima gera uma tabela assim:

Nome do aluno nota
Fábio Costa 9,5
Matheus Sllva 7,2
Gabriel Lima 8,7

Entendendo o código da tabela

Inicialmente criamos a tag <table> no início e </table> ao final. Dentro dessas tags vamos inserir todo o conteúdo da nossa tabela.

A tabela é dividida entre o cabeçalho e o corpo. O cabeçalho da tabela é a parte no qual informamos os nomes dos campos. Nesse código você pode ver o cabeçalho na tag <thead>.

Dentro da tag thead vamos criar a linha que vão os nomes das colunas da tabela. Inserimos a linha usando a tag <tr>.

O elemento <tr></tr> vai conter os 2 valores dos campos: O primeiro “nome do aluno” e o segundo “nota”.

Quando indicamos os nomes dos campos na linha <tr> precisamos inserí-los dentro da tag <th>.

Corpo da tabela

Feito isso temos o cabeçalho da tabela criado. Vamos agora para o corpo da tabela. O corpo é a parte onde de fato inserimos as informações da tabela. O corpo é representado pelo o elemento <tbody></tbody>.

Dentro desse elemento vamos criar as linhas (<tr>). Cada linha é um registro de informação da tabela. Nessa caso quando adicionamos um aluno na tabela, precisamos criar uma linha e dentro da linha 2 valores: O primeiro valor representando a coluna Nome do aluno e o segundo nota. Esses valores devem vir dentro do elemento <td></td>.

Para adicionar por exemplo um aluno chamado “Lucas Alves” com a nota “6”, devemos usar: