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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
---
title: '<tfoot>: Elemento para o rodapé da tabela'
slug: Web/HTML/Element/tfoot
translation_of: Web/HTML/Element/tfoot
---
<div>{{HTMLRef}}</div>
<p id="Summary">O <strong><code><tfoot></code> </strong>é um <strong>elemento HTML </strong> que define um conjunto de linhas as quais farão parte do rodapé de uma tabela HTML</p>
<div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</div>
<p class="hidden">As fontes dos exemplos interativos estão armazenadas no repositório do GitHub. Se você gosta de contribuir com exemplos interativos para o projeto por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> e nos envie uma requesição.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Categorias de conteúdo</a></th>
<td>Nenhum.</td>
</tr>
<tr>
<th scope="row">Conteúdo permitido</th>
<td>Zero ou mais {{HTMLElement("tr")}} elementos.</td>
</tr>
<tr>
<th scope="row">Omitir Tag</th>
<td>Iniciar a tag é obrigatório. O fechamento da tag pode ser omitida caso não exista mais conteúdo no elemento pai {{HTMLElement("table")}}.</td>
</tr>
<tr>
<th scope="row">Pais permitidos</th>
<td>O elemento {{HTMLElement("table")}}. O {{HTMLElement("tfoot")}} deve aparecer depois de qualquer {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, ou elementos {{HTMLElement("tr")}}. Note que isso é requerido no HTML5.<br>
{{HTMLVersionInline("4")}} O elemento {{HTMLElement("tfoot")}} não pode ser colocado depois de qualquer {{HTMLElement("tbody")}} e o elemento {{HTMLElement("tr")}}. Note que isso contradiz diretamento com as normas do HTML5.</td>
</tr>
<tr>
<th scope="row">Papeis de ARIA permitidos</th>
<td>Qualquer um</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLTableSectionElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>
<dl>
<dt>{{htmlattrdef("align")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt>
<dd>Estes atributos especificam como será o alinhamento horizontal de cada conteúdo da célula. Os possíveis valores são:
<ul>
<li><code>left</code>, alinha o conteúdo do elemento a esquerda da célula</li>
<li><code>center</code>, centraliza o conteúdo ao centro da célula</li>
<li><code>right</code>, alinha o conteúdo do elemento a direita da célula</li>
<li><code>justify</code>, insere espaços ao texto para que o mesmo fique centralizado na célula</li>
<li><code>char</code>, alinha o texto em um alinhamento especial com um deslocamento mínimo definido pelos atributos {{htmlattrxref("char", "tbody")}} e {{htmlattrxref("charoff", "tbody")}} atributos {{unimplemented_inline("2212")}}.</li>
</ul>
<p>Se nenhum atributo for definido o valor <code>left</code> é passado por padrão</p>
<div class="note"><strong>Note: </strong>Não use esse atributo o mesmo está obsoleto (não suportado) no último padrão.
<ul>
<li>Para obter os mesmo efeitos <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, use a propriedade {{cssxref("text-align")}} do CSS.</li>
<li>Para obter o mesmo efeito no CSS3, você pode usar os valores {{htmlattrxref("char", "tfoot")}} com o valor de {{cssxref("text-align")}} propriedade {{unimplemented_inline}}.</li>
</ul>
</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
<dd>Este atributo define uma cor de fundo para cada célula da coluna. Cada um dos 6 dígitos define um código hexadecimal no <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixado pelo '#'. Um desses nomes de cores predefinidos também podem ser usado:
<table style="width: 80%;">
<tbody>
<tr>
<td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>black</code> = "#000000"</td>
<td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>green</code> = "#008000"</td>
</tr>
<tr>
<td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>silver</code> = "#C0C0C0"</td>
<td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>lime</code> = "#00FF00"</td>
</tr>
<tr>
<td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>gray</code> = "#808080"</td>
<td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>olive</code> = "#808000"</td>
</tr>
<tr>
<td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>white</code> = "#FFFFFF"</td>
<td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>yellow</code> = "#FFFF00"</td>
</tr>
<tr>
<td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>maroon</code> = "#800000"</td>
<td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>navy</code> = "#000080"</td>
</tr>
<tr>
<td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>red</code> = "#FF0000"</td>
<td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>blue</code> = "#0000FF"</td>
</tr>
<tr>
<td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>purple</code> = "#800080"</td>
<td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>teal</code> = "#008080"</td>
</tr>
<tr>
<td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>fuchsia</code> = "#FF00FF"</td>
<td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
<td><code>aqua</code> = "#00FFFF"</td>
</tr>
</tbody>
</table>
<div class="note"><strong>Nota de uso:</strong> Não use este atributo, como não é mais padrão ele não foi implementado em algumas versões do Microsoft Internet Explorer: o elemento {{HTMLElement("tfoot")}} pode ser estilizando com <a href="/en-US/docs/Web/CSS">CSS</a>. Para conseguir simular efeitos do atributo <strong>bgcolor</strong> use a propriedade {{cssxref("background-color")}} do <a href="/en-US/docs/Web/CSS">CSS</a> , nos elementos {{HTMLElement("td")}} ou {{HTMLElement("th")}}.</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("char")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt>
<dd>O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se {{htmlattrxref("align", "tfoot")}} não é definido para <code>char</code>, este atributo é ignorado
<div class="note"><strong>Nota: </strong>Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use {{htmlattrxref("char", "tfoot")}} no CSS3, você pode usar o atributo {{htmlattrxref("char", "tfoot")}} com a propriedade {{cssxref("text-align")}}.</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt>
<dd>O atributo é usado para indicar um número de caracteres para compensar os dados da coluna dos caracteres de alinhamento especificados pelo atributo <strong>char</strong>.
<div class="note"><strong>Nota: </strong>Não use esse atributo o mesmo está obsoleto (e não é mais suportado) na última versão padrão.</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt>
<dd>O atributo específico para o alinhamento do texto dentro de cada linha da célula do cabeçalho de uma tabela. Possíveis valores para esse atributo são:
<ul>
<li><code>baseline</code>, coloca o texto o mais próximo possível da parte de baixo da célula, mas o alinha a <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> dos caracteres em vez do <strong>bottom</strong> deles. Caso os caracteres tenham todos os mesmo tamanho, eles terão o mesmo efeito que <code>bottom</code>.</li>
<li><code>bottom</code>, coloca o texto o mais próximo possível da parte de baixo da célula;</li>
<li><code>middle</code>, centraliza o texto na célula;</li>
<li>e <code>top</code>, coloca o texto o mais próximo possível do topo da célula.</li>
</ul>
<div class="note"><strong>Nota:</strong> Não use este atributo eles está obsoleto (e não é suportado) no último padrão: em vez disso use a propriedade {{cssxref("vertical-align")}} do CSS.</div>
</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Por favor veja a página {{HTMLElement("table")}} para exemplos sobre <code><tfoot></code>.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentários</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("html.elements.tfoot")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>Outros elemento HTML relacionados a tabela: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
<li>Propriedades CSS e pseudo-classes são especialmente úteis para estilizar elementos <code><tfoot></code>:
<ul>
<li>a pseudo-class {{cssxref(":nth-child")}} para definir o alinhamento nas células de uma coluna;</li>
<li>a propriedade {{cssxref("text-align")}} para alinar as células do conteúdo que tenham um memso caractere como '.'.</li>
</ul>
</li>
</ul>
|
