Cabeçalhos de tabela em HTML

Cabeçalhos de tabela HTML com exemplos é o tópico da postagem de hoje. Para fins educacionais.

Cabeçalhos de tabela em HTML são usados ​​para definir os cabeçalhos de linhas e colunas em uma tabela. A tag <th> é usada para definir cabeçalhos de tabela, enquanto a tag <td> é usada para definir células de tabela padrão.

Os cabeçalhos da tabela são importantes porque fornecem contexto para os dados em uma tabela. Eles deixam claro a qual coluna ou linha um dado pertence, o que pode ser especialmente importante ao lidar com conjuntos de dados complexos. Os cabeçalhos também ajudam na acessibilidade, pois fornecem informações adicionais para usuários que dependem de tecnologias assistivas, como leitores de tela.

As tabelas em HTML podem ter cabeçalhos para cada coluna ou linha ou para várias colunas e linhas ao mesmo tempo.

Índice-
E-MAIL NOME CONTATO
8:45
9:15
10:50
11:30
12:45
17:00
SEG TER QUA QUI SEX
8:45
9:15
10:50
11:30
12:45
SETEMBRO

Cabeçalhos de tabela HTML <th>

Os cabeçalhos de tabelas ou cabeçalhos de tabelas Html são determinados por meio do uso de elementos <th> . Os elementos TH referem-se às células da tabela.

Aqui está um exemplo de cabeçalhos de tabela 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
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalhos de Tabela Verticais

Os cabeçalhos da tabela HTML utilizam a primeira coluna para exibir os cabeçalhos da tabela e a primeira célula especifica o 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
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Header 1</th>
<td>Row 1, Column 1</td>
</tr>
<tr>
<th>Header 2</th>
<td>Row 2, Column 1</td>
</tr>
<tr>
<th>Header 3</th>
<td>Row 3, Column 1</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalho para Múltiplas Colunas

Usando cabeçalhos de tabela HTML, você pode ter cabeçalhos abrangendo várias colunas.

Nome Idade
Sam Curran 26
Tom henrique 48

Você pode conseguir isso usando o atributo colspan no elemento <th> :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th colspan="2">Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uma explicação mais detalhada de colspan e rowspan está localizada no capítulo intitulado Table colspan & rowspan.

Alinhar cabeçalhos de tabela

Os cabeçalhos da tabela HTML são projetados para serem em negrito e centralizados:

Primeiro nome Sobrenome Idade
Sam Curran 26
Tom henrique 48

Se você deseja alinhar os cabeçalhos da tabela à esquerda, aplique a propriedade CSS text-align:

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
<!DOCTYPE html>
<html>
<body>
<style>
th {
text-align: left;
}
</style>
<table>
<tr>
<th>Header 1</th>
<td>Row 1, Column 1</td>
</tr>
<tr>
<th>Header 2</th>
<td>Row 2, Column 1</td>
</tr>
<tr>
<th>Header 3</th>
<td>Row 3, Column 1</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Legenda da tabela

Os cabeçalhos de tabela HTML podem incluir legendas que servem como cabeçalhos para toda a tabela.

Por mês Despesas
Junho $ 250
Poderia $ 350

As legendas das tabelas podem ser adicionadas usando a tag <caption> :

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
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Table of Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Department</th>
</tr>
<tr>
<td>Johnny</td>
<td>Manager</td>
<td>Sales</td>
</tr>
<tr>
<td>William</td>
<td>Engineer</td>
<td>Engineering</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

IMPORTANTE: A tag <caption> deve ser incluída após a tag <table> .

Você pode adicionar estilos CSS à tag <caption> como qualquer outro elemento HTML. 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
<!DOCTYPE html>
<html>
<head>
<style>
caption {
text-align: center;
font-weight: bold;
font-size: 1.2em;
margin-top: 20px;
}
</style>
</head>
<body>
<table>
<caption>Table of Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Department</th>
</tr>
<tr>
<td>Johnny</td>
<td>Manager</td>
<td>Sales</td>
</tr>
<tr>
<td>William</td>
<td>Engineer</td>
<td>Engineering</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalhos de tabela HTML Usos de desenvolvimento da Web

Os cabeçalhos de tabela em HTML são uma parte essencial do desenvolvimento da Web e são comumente usados ​​em muitos tipos de sites, incluindo sites de comércio eletrônico, aplicativos financeiros e ferramentas de análise de dados. Aqui estão alguns dos usos mais comuns de cabeçalhos de tabela em HTML:

  • Os cabeçalhos das tabelas podem ajudar a organizar os dados de forma clara e estruturada, facilitando a leitura e compreensão das informações pelos usuários.
  • Os cabeçalhos da tabela geralmente são usados ​​para classificar os dados em ordem crescente ou decrescente com base nos valores da coluna. Isso pode ser útil para usuários que desejam encontrar rapidamente as informações de que precisam.
  • Os cabeçalhos da tabela também podem ser usados ​​para filtrar dados com base em critérios específicos. Por exemplo, uma tabela de produtos pode ser filtrada por categoria ou faixa de preço usando os cabeçalhos da tabela.
  • Ao usar cabeçalhos de tabela para fornecer informações adicionais para usuários que dependem de tecnologias assistivas, como leitores de tela, você pode tornar seu site mais acessível a um público mais amplo.
  • Cabeçalhos de tabela bem projetados podem tornar o conteúdo da tabela mais atraente visualmente e mais fácil de navegar, o que pode melhorar a experiência geral do usuário em seu site.
Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, assine nosso boletim informativo abaixo para estar em contato com as informações técnicas 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
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.