Tag <thead> em HTML

A tag thead é discutida neste artigo por meio de exemplos , em um esforço para cumprir os objetivos educacionais.

A tag <thead> em HTML é usada para definir a seção de cabeçalho de uma tabela. A seção de cabeçalho geralmente contém uma ou mais linhas de células de cabeçalho de tabela (definidas usando a tag <th> ) que descrevem os dados nas colunas abaixo.

A tag <thead> é freqüentemente usada em combinação com as tags <tbody> e <tfoot> para dividir o conteúdo da tabela em seções com propósitos diferentes. A seção <thead> geralmente é colocada imediatamente após a tag <table> e antes de qualquer seção <tbody> ou <tfoot> .

Html Tag Thead significa The Table Head element – ​​Um exemplo de uma tabela HTML com uma tag <thead> , <tbody> e <tfoot> :

Example: 

1
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html><body><table><thead><tr><th>Product ID</th><th>Product Name</th><th>Unit Price</th><th>Quantity</th><th>Total Price</th></tr></thead><tbody><tr><td>A001</td><td>Apple</td><td>$1.50</td><td>3</td><td>$4.50</td></tr><tr><td>B002</td><td>Banana</td><td>$2.00</td><td>3</td><td>$6.00</td></tr><tr><td>O003</td><td>Orange</td><td>$3.00</td><td>3</td><td>$9.00</td></tr></tbody><tfoot><tr><td>Total</td><td>$19.50</td></tr></tfoot></table></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de estilização dos elementos <thead> , <tbody> e <tfoot> de uma tabela HTML com CSS:

Example: 

1
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!DOCTYPE html><html><head><title>Styled Table</title><style>thead {background-color: #fcb2b2;}th, td {border: 1px solid rgb(179, 133, 133);padding: 8px;text-align: left;}tfoot {background-color: maroon;font-weight: bold;color:white;}tbody {color: gray;}</style></head><body><table><thead><tr><th>Event Name</th><th>Date</th><th>Location</th></tr></thead><tbody><tr><td>Concert</td><td>Jan 20, 2022</td><td>New York</td></tr><tr><td>Festival</td><td>Feb 10, 2022</td><td>Los Angeles</td></tr><tr><td>Exhibition</td><td>Mar 15, 2022</td><td>Chicago</td></tr></tbody><tfoot><tr><td>Upcoming events</td></tr></tfoot></table></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo do conteúdo alinhado usando CSS para o <thead> :

Example: 

1
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<!DOCTYPE html><html><head><title>Styled Table</title><style>thead {background-color: #fcb2b2;text-align: center;}th, td {border: 1px solid rgb(179, 133, 133);padding: 8px;text-align: right;}tfoot {background-color: maroon;font-weight: bold;color:white;}tbody {color: gray;}</style></head><body><table><thead><tr><th>Event Name</th><th>Date</th><th>Location</th></tr></thead><tbody><tr><td>Concert</td><td>Jan 20, 2022</td><td>New York</td></tr><tr><td>Festival</td><td>Feb 10, 2022</td><td>Los Angeles</td></tr></tbody><tfoot><tr><td>Upcoming events</td></tr></tfoot></table></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode usar a propriedade width em CSS para definir a largura de uma tag <thead> da célula do cabeçalho da tabela . Aqui está um exemplo:

Example: 

1
123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html><head><style>thead {width: 50px;}th, td {border: 1px solid;padding: 8px;text-align: left;}</style></head><body><table><thead><tr><th>Company</th><th>Created</th><th>Location</th></tr></thead><tbody><tr><td>Goolge</td><td>September 4, 1998</td><td>Menlo Park, California, United States</td></tr><tr><td>Tesla</td><td>July 01, 2003</td><td>San Carlos, California, United States</td></tr></tbody></table></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag <thead> com CSS:

Example: 

1
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!DOCTYPE html><html><head><style>table {width: 100%;border-collapse: separate;border-spacing: 0px 10px;}thead {background-color: #333;color: #fff;}th, td {padding: 20px;text-align: center;border: 2px solid #444;}th {font-size: 1.2em;border-bottom: none;}td {font-size: 1em;border-top: none;}</style></head><body><table><thead><tr><th>Name</th><th>Age</th><th>City</th></tr></thead><tbody><tr><td>Lionel Andrés Messi</td><td>35</td><td>Rosario, Argentina</td></tr><tr><td>Cristiano Ronaldo</td><td>37</td><td>Hospital Dr. Nélio Mendonça, Funchal, Portugal</td></tr><tr><td>Gerard Piqué</td><td>35</td><td>Barcelona, Spain</td></tr></tbody></table></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Conselho: normalmente, as tags <thead> , <tbody> e <tfoot> não afetarão o layout da tabela. Para estilizar esses elementos, você precisará usar CSS.


Usos da tag <thead>

Para organizar informações de cabeçalho em tabelas HTML, use a tag Thead <thead> .

Para indicar o cabeçalho (corpo e rodapé) de uma tabela, adicione o Tag <thead> com os elementos Tag <tbody> e Tag <tfoot>.

Ao usar esses elementos, os navegadores podem navegar no corpo da tabela por conta própria a partir do cabeçalho e do rodapé. Além disso, se uma tabela grande ocupar várias páginas , o cabeçalho e o rodapé da tabela podem ser exibidos no início e no final de cada uma.

IMPORTANTE: O elemento <thead> deve conter uma ou várias tags <tr> dentro dele.

A Tag <thead> deve ser posicionada de acordo: abaixo de um elemento <table> , seguido dos elementos <caption>, <colgroup> antes de <tbody> , <tfoot> e <tr>.

Usos Comuns

Aqui estão alguns usos comuns da tag <thead> :

  • A tag <thead> é usada para definir os cabeçalhos de uma tabela. As células de cabeçalho fornecem uma breve descrição dos dados contidos em cada coluna.
  • A tag <thead> geralmente é usada em conjunto com bibliotecas JavaScript para fornecer classificação dinâmica dos dados da tabela. Quando um usuário clica em uma célula de cabeçalho, o código JavaScript pode classificar os dados com base no conteúdo dessa coluna.
  • Usando a tag <thead> para definir os cabeçalhos de uma tabela, os desenvolvedores podem melhorar a acessibilidade da tabela para usuários que dependem de tecnologias assistivas, como leitores de tela. As células de cabeçalho são anunciadas separadamente das células de dados, facilitando a compreensão da estrutura da tabela pelos usuários.
  • A tag <thead> pode ser usada para criar uma tabela mais estruturada e organizada. Ao separar visualmente as células do cabeçalho do restante da tabela, os desenvolvedores podem facilitar o entendimento dos usuários sobre as relações entre os dados.
  • A tag <thead> pode ser estilizada usando CSS para alterar a aparência dos cabeçalhos da tabela. Isso pode ajudar a tornar a tabela mais atraente visualmente e mais fácil de ler.

Atributos

Global

A Tag <thead> também aceita os Atributos Globais em HTML.

Evento

A Tag Thead <thead> inclui os Atributos do Evento em HTML.


Compatibilidade do navegador

Elemento
<thead> Sim Sim Sim Sim Sim

CSS predefinido

A maioria dos navegadores apresenta a tag <thead> com os valores listados abaixo:

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

Tag <thead> Benefícios

A tag <thead> em HTML oferece vários benefícios, incluindo:

  • Ao usar a tag <thead> para definir a seção de cabeçalho de uma tabela, os desenvolvedores podem criar tabelas mais estruturadas e organizadas. As células do cabeçalho são visualmente separadas do resto da tabela, tornando mais fácil para os usuários entender as relações entre os dados.
  • A tag <thead> pode melhorar a acessibilidade das tabelas para usuários que dependem de tecnologias assistivas, como leitores de tela. Ao identificar as células de cabeçalho usando a tag <th> dentro da seção <thead> , os leitores de tela podem anunciar os cabeçalhos separadamente das células de dados, tornando mais fácil para os usuários entender a estrutura da tabela.
  • As tabelas podem ser divididas em diferentes seções usando as tags <thead> , <tbody> e <tfoot> . Isso permite que os desenvolvedores forneçam informações ou estruturas adicionais à tabela sem sobrecarregar as principais células de dados. Por exemplo, a tag <tfoot> pode ser usada para exibir informações resumidas, como totais ou médias.
  • A tag <thead> pode ser estilizada usando CSS para alterar a aparência dos cabeçalhos da tabela. Por exemplo, os desenvolvedores podem alterar o tamanho da fonte, cor ou cor de fundo dos cabeçalhos para destacá-los mais.
Deixe sua reação abaixo para estar em contato com as informações técnicas mais recentes deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone