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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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

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

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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

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

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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

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

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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

Conselho: normalmente, as tags <thead> , <tbody> e <tfoot> não afetarão o layout da tabela. Para estilizar esses elementos, você precisará usar CSS.

Índice-

Marca <thead> Em HTML:

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.

Tag <thead> em HTML

Example:

Example:

Example:

Example:

Example:

Usos da tag <thead>

Usos Comuns

Atributos

Global

Evento

Compatibilidade do navegador

CSS predefinido

Tag <thead> Benefícios

Sentindo entediado?