Dominando o Corpo da Tabela HTML

Introdução

Em HTML, a tag <tbody> é usada para indicar o corpo de uma tabela HTML, consistindo em um conjunto de linhas dentro da tabela. Este laboratório irá guiá-lo através dos passos para criar uma tabela HTML simples com a tag <tbody>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criar a Tag da Tabela

Crie um arquivo HTML vazio chamado index.html no seu editor de código preferido.

Crie uma tag <table> na seção <body> do arquivo HTML.

<body>
  <table></table>
</body>

Adicionar a Tag da Cabeçalho da Tabela

Na tag <table>, crie uma tag <thead> e adicione uma linha de cabeçalho com tags <th> dentro.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</table>

Adicionar a Tag do Corpo da Tabela

Na tag <table>, crie uma tag <tbody> e adicione linhas com tags <td> dentro.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

Adicionar a Tag do Rodapé da Tabela (Opcional)

Na tag <table>, crie uma tag <tfoot> e adicione uma linha de rodapé com tags <td> dentro.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 People</td>
    </tr>
  </tfoot>
</table>

Estilizar a Tabela

Use CSS para estilizar a tabela, incluindo <thead>, <tbody> e <tfoot>, se aplicável.

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

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

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

Resumo

Neste laboratório, aprendemos como usar a tag <tbody> para criar uma tabela HTML com linhas e colunas. Seguindo os passos, criamos uma tabela simples com seções de cabeçalho, corpo e rodapé, e estilizamos a tabela com CSS para torná-la mais profissional. A tag <tbody> é uma ferramenta útil para construir tabelas complexas em HTML, e é frequentemente usada em conjunto com outros elementos de tabela para criar visualizações de dados dinâmicas e interativas.