CodeGym/Cursos/Frontend SELF PT/Estruturação de tabelas

Estruturação de tabelas

Disponível

7.1 Tag <caption>

As tags <caption>, <thead>, <tbody> e <tfoot> são usadas para melhorar a estrutura e a marcação semântica de tabelas em HTML. Eles ajudam a organizar os dados, tornando as tabelas mais compreensíveis e acessíveis tanto para os usuários quanto para os motores de busca.

Tag <caption>

A tag <caption> é usada para adicionar um título à tabela. Ela ajuda a descrever o conteúdo da tabela, tornando-a mais compreensível para os usuários e acessível para os motores de busca.

Sintaxe:

HTML
<table>
  <caption>Título da tabela</caption>
  <!-- Conteúdo da tabela -->
</table>

Exemplo:

HTML
<table>
  <caption>Título da tabela</caption>
  <tr>
    <th>Nome</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>85</td>
  </tr>
</table>

7.2 Tag <thead>

A tag <thead> é usada para agrupar as linhas de cabeçalho da tabela. Ela ajuda a separar logicamente o cabeçalho do conteúdo principal da tabela.

Sintaxe:

HTML
<table>
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
    </tr>
  </thead>
  <!-- Conteúdo da tabela -->
</table>

Exemplo:

HTML
<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Nota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

7.3 Tag <tbody>

A tag <tbody> é usada para agrupar a parte principal do conteúdo da tabela. Ela ajuda a separar o conteúdo principal do cabeçalho e do "rodapé" da tabela.

Sintaxe:

HTML
<table>
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Conteúdo da tabela -->
  </tbody>
</table>

Exemplo:

HTML
<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Nota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

7.4 Tag <tfoot>

A tag <tfoot> é usada para agrupar as linhas do "rodapé" da tabela. Ela geralmente contém informações de resumo ou totalização.

Sintaxe:

HTML
<table>
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Conteúdo da tabela -->
  </tbody>
  <tfoot>
    <tr>
      <td>Total 1</td>
      <td>Total 2</td>
    </tr>
  </tfoot>
</table>

Exemplo completo:

HTML
<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Nota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Média</td>
      <td>87.5</td>
    </tr>
  </tfoot>
</table>

Lembrar-se disso é realmente muito simples:

Explicação da estrutura da tabela

  • <table>: contêiner externo para toda a tabela
  • <caption>: título da tabela que ajuda a descrever seu conteúdo
  • <thead>: agrupa as linhas de cabeçalho da tabela
  • <tbody>: agrupa o conteúdo principal da tabela
  • <tfoot>: agrupa as linhas do rodapé da tabela

Reforçando o material

Vamos criar uma tabela com todas as tags estudadas e estilizar ela.

HTML
<table>
  <caption>Resultados do exame</caption>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Nota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>91</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Nina</td>
      <td>89</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Média</td >
      <td>91.33</td>
    </tr>
  </tfoot>
</table>
CSS
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 18px;
  text-align: left;
}

caption {
  caption-side: top;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

th, td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

thead th {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tfoot td {
  font-weight: bold;
  background-color: #f2f2f2;
}
1
Tarefa
Frontend SELF PT,  nível 5lição 2
Bloqueado
Título com <caption>
Título com <caption>
1
Tarefa
Frontend SELF PT,  nível 5lição 2
Bloqueado
Estrutura da tabela
Estrutura da tabela
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário