Vamos começar discutindo tabelas. Especificamente, vamos examinar a seguinte organização de texto:

Tabelas

Tabelas em HTML são usadas para exibir dados em linhas e colunas, proporcionando uma maneira estruturada de organizar informações.

Criando Tabelas

A tag <table> é usada para criar uma tabela em HTML. As tabelas são compostas por linhas (<tr>) e células (<td>), que definem a estrutura e o conteúdo da tabela. A estrutura básica da tabela será a seguinte.
Exemplo:

No exemplo acima:

• A tag <table> é usada para criar uma tabela;
• Cada tag <tr> representa uma linha na tabela;
• Dentro de cada linha, as tags <td> representam células, definindo o conteúdo de cada célula.

Embora pudéssemos parar de trabalhar com tabelas aqui, podemos melhorar sua semântica para facilitar a compreensão de seu conteúdo pelos mecanismos de busca.

Cabeçalhos de Tabela

A tag <th> define cabeçalhos de tabela que representam cabeçalhos de coluna ou linha. Deve ser usada dentro da seção <thead> de uma tabela.
Exemplo:

No exemplo acima:

• A seção <thead> contém células de cabeçalho de tabela definidas usando a tag <th>;
• Cada tag <th> representa uma célula de cabeçalho.

Corpo da Tabela

A seção tbody deve vir após a seção thead e envolver todos os dados da tabela, exceto os cabeçalhos. Todos os elementos dentro do tbody permanecem os mesmos.
Exemplo:

Resumindo

As tabelas são estruturadas com uma hierarquia de elementos:

1. Tabela

A tag <table> é o elemento pai que define toda a tabela. Ela contém todas as linhas e colunas da tabela.

2. Cabeçalho da Tabela

A tag <thead> é usada para agrupar as linhas de cabeçalho da tabela. Ela contém uma ou mais linhas (<tr>) de células de cabeçalho (<th>), definindo os cabeçalhos das colunas.

3. Corpo da Tabela

A tag <tbody> é usada para agrupar as linhas de conteúdo principal da tabela. Ela contém uma ou mais linhas (<tr>) de células de dados (<td>), definindo o conteúdo principal da tabela.

4. Linhas da Tabela

A tag <tr> representa uma linha dentro da tabela. Ela contém uma ou mais células de tabela (<td> ou <th>), definindo o conteúdo de cada coluna dentro da linha.

5. Células da Tabela

A tag <td> representa uma célula de dados padrão dentro do corpo da tabela. A tag <th> representa uma célula de cabeçalho dentro do cabeçalho da tabela. Cada célula contém o conteúdo real da tabela, como texto, imagens ou outros elementos HTML.

Tutorial em Vídeo