Cabeçalho da Tabela HTML: Dominando a Estrutura e o Design de Tabelas

Introdução

Em HTML, as tabelas são usadas para exibir dados em linhas e colunas. A tag <thead> é usada para definir a linha de cabeçalho de uma tabela. A linha de cabeçalho é geralmente usada para rotular o conteúdo nas colunas abaixo e conter rótulos descritivos.

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 uma tabela

Crie um arquivo index.html e abra-o no seu editor de texto. É aqui que você escreverá seu código HTML.

Crie uma tabela usando a tag <table>.

<table>
  <!-- content goes here -->
</table>

Adicionar um cabeçalho de tabela

Adicione uma tag <thead> para definir a linha de cabeçalho da tabela. Dentro da tag <thead>, adicione suas linhas de cabeçalho de tabela usando a tag <th>.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

Inserir conteúdo na tabela

Adicione conteúdo à tabela usando a tag <tbody> e as tags aninhadas <tr> e <td>.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>

Estilizar o cabeçalho da tabela

Use CSS para estilizar a tag <thead>. Abaixo está um exemplo de como mudar a cor de fundo do cabeçalho para cinza:

<style>
  thead {
    background-color: gray;
  }
</style>

Resumo

A tag <thead> é usada para definir a linha de cabeçalho de uma tabela. É outro elemento filho da tag <table> e vem antes das tags <tbody> e <tfoot>. Usando CSS, você pode estilizar o cabeçalho da tabela para torná-lo mais visualmente atraente.