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:
Aqui está um exemplo de estilização dos elementos <thead> , <tbody> e <tfoot> de uma tabela HTML com CSS:
Example:
Aqui está um exemplo do conteúdo alinhado usando CSS para o <thead> :
Example:
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:
Aqui está outro exemplo da tag <thead> com CSS:
Example:
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.
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.
