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

Tabelas

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

Criando Tabelas

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

Embora seja possível encerrar o trabalho com tabelas neste ponto, é possível aprimorar sua semântica para facilitar a compreensão do conteúdo pelos mecanismos de busca.

Cabeçalhos de Tabela

A tag <th> define cabeçalhos de tabela que representam títulos de colunas ou linhas. Deve ser utilizada dentro da seção <thead> da 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.

<table></table>

2. Cabeçalho da Tabela

A tag <thead> é utilizada 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 títulos das colunas.

<table>
  <thead></thead>
</table>

3. Corpo da Tabela

A tag <tbody> é utilizada 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.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

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.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

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.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Tutorial em Vídeo