diff options
Diffstat (limited to 'files/pt-br/web/html/element/th/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/th/index.html | 234 |
1 files changed, 234 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/th/index.html b/files/pt-br/web/html/element/th/index.html new file mode 100644 index 0000000000..6d4a9fcde8 --- /dev/null +++ b/files/pt-br/web/html/element/th/index.html @@ -0,0 +1,234 @@ +--- +title: <th> +slug: Web/HTML/Element/th +translation_of: Web/HTML/Element/th +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento</strong> <strong>HTML <code><th></code> </strong> define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é denifida pelos atributos {{htmlattrxref("scope", "th")}} e {{htmlattrxref("headers", "th")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Categorias do conteúdo</a></th> + <td>Nenhuma.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>, mas sem descendentes de cabeçalho, rodapé, conteúdo de seção ou conteúdo de cabeçalho.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>A tag de abertura é obrigatória.<br> + A tag de fechamento pode ser omitida, se for imediatamente seguido por um {{HTMLElement("th")}}, {{HTMLElement("td")}} ou se não houver mais dados em seu elemento pai.</td> + </tr> + <tr> + <th scope="row">Elemento pai</th> + <td>Um elemento {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Funções ARIA permitidas</th> + <td>Qualquer</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}}</dt> + <dd>Este atributo contém uma breve descrição do conteúdo da célula. Alguns usuários-agentes, como leitores, pode apresentar essa descrição antes do próprio conteúdo.</dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Este atributo contém um valor inteiro não negativo que indica quantas colunas a célula ocupará. Valor padrão <code>1</code>. Valores acima de 1000 são considerados incorretos e serão modificados para o valor padrão <code>1</code>.</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Este atributo contém uma lista de palavras separadas por espaço, cada uma correspondendo ao atributo <strong>id</strong> dos elementos {{HTMLElement("th")}} que se aplicam a este elemento.</dd> + <dd></dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Este atributo contém um valor inteiro não negativo que indica quantas linhas a célula estende. Valor padrão <code>1</code>. Se seu valor é definido como <code>0</code>, ele se estende até o final da tabela ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, mesmo que implicitamente definido), que a célula pertence. Não é possível colocar valores superiores a 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>Este atributo define as células a que o cabeçalho (definido no elemento {{HTMLElement("th")}}) se relaciona.<br> + Possíveis valores:</dd> + <dd> + <ul> + <li><code>row</code>: O cabeçalho se relaciona com todas as células da linha a que pertence.</li> + <li><code>col</code>: O cabeçalho se relaciona com todas as células da coluna a que pertence.</li> + <li><code>rowgroup</code>: O cabeçalho pertence a um grupo de linhas e se relaciona com todas as suas células. Essas células podem ser colocadas à direita ou à esquerda do cabeçalho, dependendo do valor do atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> no elemento {{HTMLElement("table")}}.</li> + <li><code>colgroup</code>: O cabeçalho pertence a um grupo de colgroup e se relaciona com todas as suas células.</li> + <li><code>auto</code></li> + </ul> + + <p>O valor padrão quando este atributo não é especificado é <code>auto</code>.</p> + + <h3 id="Atributos_depreciados">Atributos depreciados</h3> + + + </dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>Este atributo especifica como o alinhamento horizontal do conteúdo da célula será tratado.</dd> + <dd>Possíveis valores: + <ul> + <li><code>left</code>: O conteúdo é alinhado a esquerda da célula.</li> + <li><code>center</code>: O conteúdo é centralizado da célula.</li> + <li><code>right</code>: O conteúdo é alinhado a direita da célula.</li> + <li><code>justify</code> (somente com texto): O conteúdo é estendido dentro da célula para cobrir toda a sua largura.</li> + <li><code>char</code> (somente com texto): O conteúdo está alinhado a um caractere dentro do elemento <code><th></code> com deslocamento mínimo. Esse caractere é definido pelos atributos {{htmlattrxref("char", "th")}} e {{htmlattrxref("charoff", "th")}}.</li> + </ul> + + <p>O valor padrão quando não especificado é <code>left</code>.</p> + </dd> + <dd> + + + <div class="note"><strong>Note: </strong>Não use esse atributo, pois ele está obsoleto no padrão mais recente. + + <ul> + <li>Para alcançar o mesmo efeito que os valores <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, aplique a propriedade CSS {{cssxref("text-align")}} no elemento.</li> + <li>Para alcançar o mesmo efeito que os valor <code>char</code>, atribue a {{cssxref("text-align")}} o mesmo valor que você usaria para {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} no CSS3.</li> + </ul> + </div> + + + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>Este atributo contém uma lista de palavras separadas por espaço. Cada palavra é o <code>id</code> de um grupo de células às quais este cabeçalho se aplica. + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente: use o atributo {{htmlattrxref("scope", "th")}}.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Esse atributo define a cor de fundo de cada célula na coluna. Ele consiste de 6 digitos hexadecimais definidos pelo <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> com o prefixo '#. Nesse atributo pode ser usado dezesseis cores predefinidas: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Não use esse atributo como padrão pois não é implementado em algumas versões do Microsoft Internet Explorer: O elemento {{HTMLElement("th")}} deve ser estilizado usando <a href="/en-US/docs/Web/CSS">CSS</a>. Para criar um efeito semelhante, use a propriedade {{cssxref("background-color")}} do <a href="/en-US/docs/Web/CSS">CSS</a>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>O conteúdo da célula está alinhado a um caractere. Os valores típicos incluem um ponto (.) para alinhar números ou valores monetários. Se {{htmlattrxref("align", "th")}} não está definido no <code>char</code>, o atributo é ignorado. + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente. Para obter o mesmo efeito, você pode especificar o caractere como o primeiro valor da propriedade {{cssxref("text-align")}}, {{unimplemented_inline}} no CSS3.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>Este atributo é usado para mudar os dados da coluna para a direita do caractere especificado pelo atributo <strong>char</strong>. Seu valor especifica o comprimento desse deslocamento. + <div class="note"><strong>Note: </strong>Não use esse atributo, pois ele está obsoleto no padrão mais recente.</div> + </dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>Esse atributo é usado para definir uma altura recomendada da célula. + <div class="note"><strong>Note: </strong>Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("height")}}.</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>Esse atributo especifica como o texto é alinhado verticalmente na célula.</dd> + <dd>Possíveis valores: + <ul> + <li><code>baseline</code>: Posiciona o texto próximo à parte inferior da célula e o alinha ao <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">roda pé</a>. Se os caracteres não descerem abaixo da linha de base, o valor da linha de base alcançará o mesmo efeito que <code>bottom</code>.</li> + <li><code>bottom</code>: Posiciona o texto próximo à parte inferior da célula.</li> + <li><code>middle</code>: Centraliza o texto na célula.</li> + <li><code>top</code>: Posiciona o texto próximo à parte superior da célula.</li> + </ul> + + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("vertical-align")}}.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>Este atributo é usado para definir uma largura de célula recomendada. Espaço adicional pode ser adicionado com as propriedades {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} e {{domxref("HTMLTableElement.cellPadding", "cellpadding")}}, e a largura do elemento {{HTMLElement("col")}} pode criar largura extra. Mas, se a largura de uma coluna for muito estreita para mostrar uma célula específica corretamente, ela será ampliada quando exibida. + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("width")}}.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja {{HTMLElement("table")}} para mais elementos <code><th></code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estados</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + + + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li>Outros elementos HTML relacionados: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> |