Tag tfoot Em HTML

Veremos a tag HTML <tfoot> com exemplos neste post. Deve atender às necessidades de aprendizagem.

A tag <tfoot> em HTML é usada para definir uma seção de rodapé para uma tabela. Essa tag é usada em combinação com a tag <table> , que cria a própria tabela, e as tags <thead> e <tbody> , que definem as seções de cabeçalho e corpo da tabela, respectivamente.

Tag tfoot significa elemento Table Foot – Aqui está um exemplo de uma tabela HTML com um elemento <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
<!DOCTYPE html>
<html>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de uso da tag <tfoot> para adicionar um rodapé a uma tabela, juntamente com algumas personalizações 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;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tfoot td {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Product List</h1>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>$10</td>
<td>100</td>
</tr>
<tr>
<td>Product 2</td>
<td>$20</td>
<td>200</td>
</tr>
<tr>
<td>Product 3</td>
<td>$30</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$60</td>
<td>600</td>
</tr>
</tfoot>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo de uso da tag <tfoot> para criar um rodapé de tabela, juntamente com alguns recursos adicionais:

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>
<h1>Employee List</h1>
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Sam Billings</td>
<td>$3000</td>
</tr>
<tr>
<td>002</td>
<td>Tom Curran</td>
<td>$4500</td>
</tr>
<tr>
<td>003</td>
<td>Jeffery Anderson</td>
<td>$4000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>$11500</td>
</tr>
</tfoot>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag <tfoot> para adicionar uma cor de fundo e alinhar o centro do texto 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
59
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
thead, tfoot {
background-color: maroon;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
tfoot td {
font-weight: normal;
}
</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

Aviso: Por padrão, os elementos <thead> , <tbody> e <tfoot> não têm impacto sobre como a tabela é disposta. Mas você pode estilizar esses itens com CSS.

Índice-

Tag tfoot Em HTML:
Tag tfoot Usos:

Tag tfoot Uses

Em uma tabela HTML , a tag <tfoot> pode ser aplicada para incluir o conteúdo do rodapé.

Para definir as várias partes de uma tabela ( rodapé , cabeçalho , corpo ), a tag <tfoot> é aplicada junto com as tags <thead> e <tbody>.

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: Um elemento com o atributo <tfoot> deve conter um ou mais elementos <tr> .

A tag tfoot <tfoot> sempre deve ser empregada como filha de um elemento <table>, seguindo qualquer tag <caption> , <colgroup> , <thead> e <tbody> .

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

A seção de rodapé geralmente é usada para exibir totais para colunas ou linhas na tabela. Por exemplo, se você tiver uma tabela de dados de vendas, poderá usar a tag <tfoot> para exibir o total de vendas de cada mês.
Você também pode usar a seção de rodapé para exibir médias de colunas ou linhas na tabela. Por exemplo, se você tiver uma tabela de notas dos alunos, poderá usar a tag <tfoot> para exibir a nota média de cada tarefa.
A seção de rodapé pode ser usada para fornecer um resumo dos dados na tabela. Por exemplo, se você tiver uma tabela de resultados de pesquisa, poderá usar a tag <tfoot> para exibir um resumo das respostas.
A seção de rodapé também pode ser usada para fornecer informações adicionais relacionadas aos dados da tabela. Por exemplo, se você tiver uma tabela de produtos, poderá usar a tag <tfoot> para incluir um aviso de direitos autorais ou um link para obter mais informações sobre os produtos.

Atributos

Global

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

Evento

A tag Tfoot <tfoot> inclui os atributos do evento em HTML.

Compatibilidade do navegador

Elemento
<pé>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

A maioria dos navegadores renderiza a tag <tfoot> com estes valores padrão:

tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}

Tag tfoot Vantagens

Aqui estão algumas das principais vantagens:

Ao usar a tag <tfoot> para estruturar os dados da tabela, os desenvolvedores podem melhorar a acessibilidade de suas páginas da Web para usuários que dependem de tecnologias assistivas. Por exemplo, os leitores de tela podem usar a tag <tfoot> para ler as informações do rodapé, fornecendo uma imagem mais completa dos dados apresentados na tabela.
A tag <tfoot> pode ajudar a melhorar a legibilidade das tabelas, fornecendo quebras claras entre as seções de cabeçalho, corpo e rodapé da tabela. Isso torna mais fácil para os usuários digitalizar e interpretar os dados na tabela e pode melhorar a experiência geral do usuário.
A tag <tfoot> também pode ajudar a organizar melhor os dados em uma tabela, principalmente quando se trata de exibir totais, médias ou outras informações resumidas. Isso torna mais fácil para os usuários entender os dados apresentados na tabela e obter informações a partir deles.
Ao usar a tag <tfoot> de forma consistente em um site, os desenvolvedores podem criar uma experiência de usuário mais consistente, o que pode ajudar a melhorar o envolvimento e a satisfação do usuário.
Ao usar a tag <tfoot> , os desenvolvedores podem aplicar estilo mais facilmente à seção de rodapé de uma tabela, ajudando a criar uma aparência mais polida e profissional.

Se este artigo foi informativo o suficiente para atender às suas necessidades educacionais, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Tag tfoot Em HTML

Example:

Example:

Example:

Example:

Tag tfoot Uses

Atributos

Global

Evento

Compatibilidade do navegador

CSS predefinido

Tag tfoot Vantagens

Sentindo entediado?