Html thead

Postado: 19 de junho de 2022

Html thead

Neste tutorial HTML veremos como usar o elemento HTML chamado de tag <thead>

A tag <thead> em HTML é usada para dar um cabeçalho ao grupo de conteúdo do corpo. Essa tag é usada em tabelas HTML como head e body que é conhecida como thead e tbody.

O elemento html <thead> é usado em conjunto com os elementos <tbody> e <tfoot> para especificar cada parte de uma tabela como cabeçalho, corpo e rodapé.

OBS: O elemento  <thead> deve ter uma ou mais tags <tr> dentro.

A tag <thead> deve ser usada no seguinte contexto: Como filho de um elemento <table> , após qualquer elemento <caption> e <colgroup> e antes de qualquer elemento <tbody> , <tfoot> e <tr> .

Dica: Os elementos <thead>, <tbody> e <tfoot> não afetarão o layout da tabela por padrão. No entanto, você pode usar CSS para estilizar esses elementos.

Veja o exemplo abaixo!

<!DOCTYPE html>
<html>
<head>
<style>

thead {color:red;}
tbody {color:blue;}
tfoot {color:#333;}

table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>Estilizando a Tabela com CSS</h1>

<table>

  <thead>
    <tr>
      <th>Front-end</th>
      <th>Back-end</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Html5</td>
      <td>PHP</td>
    </tr>
    <tr>
      <td>CSS3</td>
      <td>MySql</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>JavaScript</td>
      <td>Python</td>
    </tr>
  </tfoot>

</table>

</body>
</html>

Veja outro exemplo

Alinhar conteúdo à esquerda na tag <thead> com Css.

<table style="width:100%">

  <thead style="text-align:left">
    <tr>
      <th>Front-end</th>
      <th>Back-end</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Html5</td>
      <td>PHP</td>
    </tr>
    <tr>
      <td>CSS3</td>
      <td>MySql</td>
    </tr>
  </tbody>
</table>

Configurações padrão de CSS

A maioria dos navegadores exibirá o elemento <thead> com os seguintes valores padrão:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

Neste artigo abordamos sobre a tag Html thead.

Publicado por: loopnerd

51 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados