Marcar em HTML

O objetivo deste post é explorar Tag th <th> com exemplos para que possa ser útil para você.

A tag <th> em HTML é usada para definir uma célula de cabeçalho em uma tabela. É usado em combinação com as tags <tr> e <td> para estruturar dados tabulares e fornecer contexto e informações adicionais aos usuários

Tag th significa cabeçalho da tabela – O seguinte é uma tabela HTML básica com linhas e células do cabeçalho da tabela:

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>
<body>
<h1>Product List</h1>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A001</td>
<td>Apple</td>
<td>$1.50</td>
</tr>
<tr>
<td>B002</td>
<td>Banana</td>
<td>$2.00</td>
</tr>
<tr>
<td>O003</td>
<td>Orange</td>
<td>$3.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$6.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um exemplo de tabela com duas linhas e duas células de cabeçalho, com o conteúdo dentro das células de cabeçalho alinhado ao centro 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
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
thead, tfoot {
background-color: maroon;
}
th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h1>Product List</h1>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A001</td>
<td>Apple</td>
<td>$1.50</td>
</tr>
<tr>
<td>B002</td>
<td>Banana</td>
<td>$2.00</td>
</tr>
<tr>
<td>O003</td>
<td>Orange</td>
<td>$3.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$6.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo para criação de cabeçalhos de tabela em tabela HTML:

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
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como criar uma tabela com uma legenda em HTML:

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
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Employee List</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>Manager</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>Developer</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Sales</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como a tag <th> pode ser usada para criar uma célula de tabela única em HTML:

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
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.50</td>
<td>
<div class="unique-cell">
<p>In stock</p>
<button>Add to cart</button>
</div>
</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.75</td>
<td>
<div class="unique-cell">
<p>Out of stock</p>
<button disabled>Add to cart</button>
</div>
</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode usar a propriedade vertical align em CSS para alinhar o conteúdo dentro de um elemento <th> verticalmente. 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
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A001</td>
<td>Apple</td>
<td>$1.50</td>
</tr>
<tr>
<td>B002</td>
<td>Banana</td>
<td>$2.00</td>
</tr>
<tr>
<td>O003</td>
<td>Orange</td>
<td>$3.00</td>
</tr>
</tbody>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode usar a propriedade width em CSS para definir a largura de uma tag <th> 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
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th:first-child {
width: 50px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Iphone</td>
<td>$1400</td>
</tr>
</tbody>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

As células da tabela podem abranger várias linhas ou colunas usando os atributos <rowspan> e <colspan> nos elementos <td> e <th>.

A tabela abaixo possui células que abrangem linhas e colunas:

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
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2">Product ID</th>
<th rowspan="2">Product Name</th>
<th colspan="2">Price</th>
</tr>
<tr>
<th>Unit Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chair</td>
<td>$10</td>
<td>$15.50</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td>$15</td>
<td>$22</td>
</tr>
<tr>
<td>3</td>
<td>Fan</td>
<td>$8.00</td>
<td>$13.20</td>
</tr>
</tbody>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Tag th Em HTML:

Tag de uso

A Tag th <th> indica uma célula de cabeçalho regular em uma tabela HTML.

Existem dois tipos de células em uma tabela HTML:

As células do cabeçalho – contêm as informações do cabeçalho (feitas pela tag <th> )
A célula de dados – contém dados (feitos com o elemento <td> )

Sempre que discutimos a tag <th> , o texto nas tags <th> é automaticamente colocado em negrito e centralizado. O texto dentro dos elementos <th> é padrão e alinhado à esquerda como padrão.

Usos Comuns

Aqui estão alguns dos principais usos da tag <th> :

A tag <th> é comumente usada para definir as células de cabeçalho em uma tabela. Ao usar células <th>, os desenvolvedores podem fornecer contexto e informações adicionais sobre os dados na tabela, como títulos de coluna ou linha, unidades de dados ou tipos de dados. Isso pode tornar a tabela mais fácil de entender e interpretar para os usuários.
O uso de células <th> em tabelas pode ajudar a melhorar a acessibilidade de páginas da Web para usuários que dependem de tecnologias assistivas, como leitores de tela. Ao usar células <th> para estruturar os dados da tabela, os desenvolvedores podem fornecer informações adicionais sobre a estrutura e os dados da tabela, o que pode ajudar a melhorar a experiência do usuário para todos os usuários.
A tag <th> pode ter um estilo diferente da tag <td> , que é usada para células regulares da tabela. Isso pode ajudar a distinguir as células de cabeçalho das células de dados na tabela, tornando a tabela mais fácil de ler e entender.
Muitos plug-ins e bibliotecas de classificação de tabelas usam a tag <th> para identificar as células de cabeçalho que podem ser usadas para classificação. Ao adicionar a funcionalidade de classificação às tabelas, os usuários podem manipular e analisar mais facilmente os dados apresentados na tabela.

Atributos

Global

A Tag th <th> são compatíveis com os Atributos Globais em HTML.

Evento

A Tag <th> também aceita os Atributos de Evento em HTML.

Lista de Atributos

Atributo	Valor	Visão geral
abreviatura	texto	Indica uma forma abreviada do texto que aparece em uma célula de cabeçalho.
colspan	número	Determina quantas colunas uma célula deve ter
cabeçalhos	header_id	Indica a quais células de cabeçalho uma célula pertence
Expansão de linha	número	Determinar quantas linhas devem ser exibidas em uma célula
escopo	col colgroup linha rowgroup	Descreve se uma célula de cabeçalho é um cabeçalho para uma coluna, linha ou coleção de colunas ou linhas.

Compatibilidade do navegador

Elemento
<th>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

Os seguintes valores Tag <th> são usados pelos principais navegadores para exibir o elemento <th>:

th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}

Benefícios da Tag HTML

A tag <th> em HTML tem vários benefícios, incluindo:

Usando células <th> para definir as células de cabeçalho em uma tabela, os desenvolvedores podem melhorar a legibilidade da tabela para os usuários. O uso de células de cabeçalho pode ajudar a fornecer contexto e informações sobre os dados da tabela, facilitando sua compreensão e interpretação.
O uso de células <th> em tabelas pode ajudar a melhorar a acessibilidade de páginas da Web para usuários que dependem de tecnologias assistivas, como leitores de tela. Ao fornecer informações adicionais sobre a estrutura e os dados da tabela, os usuários com deficiência podem entender e navegar pelo conteúdo com mais facilidade.
A tag <th> geralmente é usada para identificar células de cabeçalho que podem ser usadas para classificação. Isso pode ser útil para usuários que precisam analisar e manipular grandes quantidades de dados na tabela.
A tag <th> pode ter um estilo diferente da tag <td> , que é usada para células regulares da tabela. Isso pode ajudar a distinguir as células de cabeçalho das células de dados na tabela, tornando a tabela mais fácil de ler e entender.
O uso de células <th> em tabelas pode melhorar a estrutura semântica do documento HTML. Ao usar as tags HTML apropriadas para diferentes tipos de conteúdo, os desenvolvedores podem criar documentos que são mais facilmente compreendidos por humanos e máquinas.

Assine nosso boletim informativo abaixo para estar em contato com as informações técnicas mais recentes neste site.

Nós valorizamos o seu feedback.

Marcar em HTML

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Tag de uso

Usos Comuns

Atributos

Global

Evento

Lista de Atributos

Compatibilidade do navegador

CSS predefinido

Benefícios da Tag HTML

Sentindo entediado?