diff options
Diffstat (limited to 'files/pt-br/web/html/element/caption/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/caption/index.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/caption/index.html b/files/pt-br/web/html/element/caption/index.html new file mode 100644 index 0000000000..0100a868d4 --- /dev/null +++ b/files/pt-br/web/html/element/caption/index.html @@ -0,0 +1,196 @@ +--- +title: <caption> +slug: Web/HTML/Element/caption +tags: + - Elementos + - Tabela HTML + - Título de tabela + - título +translation_of: Web/HTML/Element/caption +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>Elemento</strong> <strong>HTML <code><caption></code> (</strong>ou <em>Elemento HTML Subtitulo de Tabela</em>) representa o título de uma tabela. Embora ele seja sempre o primeiro filho de um {{HTMLElement("table")}}, seu estilo, usando CSS pode colocar ele em qualquer lugar relativo a tabela.</p> + +<div class="note"><strong>Nota de Uso</strong>: Quando o elemento {{HTMLElement("table")}} que é o pai deste {{HTMLElement("caption")}} é o único filho de um elemento {{HTMLElement("figure")}}, use o elemento {{HTMLElement("figcaption")}} no lugar.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteúdo</a></th> + <td>Nenhuma.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos pais permitidos</th> + <td>Um elemento {{HTMLElement("table")}}, como seu primeiro filho.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributos globais</a>.</p> + +<p> </p> + +<h3 id="Atributos_obsoletos">Atributos obsoletos</h3> + +<p>Os seguintes atributos são obsoletos e não devem ser usados. Estão documentados abaixo apenas como referência ao atualizar o código, e interesse histórico.</p> + +<p> </p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Esse atributo enumerado indica como o caption deve ser alinhado em relação a tabela. Ele pode ter os seguintes valores: + <ul> + <li><code>left</code>, exibido a esquerda da tabela</li> + <li><code>top</code>, exibido antes da tabela</li> + <li><code>right</code>, exibido a direita da tabela</li> + <li><code>bottom</code>, exibido abaixo da tabela</li> + </ul> + + <div class="note"><strong>Nota de uso: </strong>Não use este atributo, como ele foi depreciado: o elemento {{HTMLElement("caption")}} deve ser estilizado usando <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Para dar um efeito similar ao atributo <code>align</code>, use as propriedades <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("caption-side")}} e {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>Quando o elemento {{HTMLElement("table")}} que contém o <caption> é o único descendente de um elemento {{HTMLElement("figure")}}, você deve usar o {{HTMLElement("figcaption")}} elemento em vez de <caption>.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Esse exemplo mostra uma tabela que tem título.</p> + +<pre><code><table> + <caption>Exemplo de título</caption> + <tr> + <th>Login</th> + <th>Email</th> + </tr> + <tr> + <td>usuario1</td> + <td>usuario1@dominio.com</td> + </tr> + <tr> + <td>usuario2</td> + <td>usuario2@dominio.com</td> + </tr> +</table></code></pre> + +<pre><code>caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +}</code></pre> + +<p>{{EmbedLiveSample('Exemplo', 650, 100)}}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos HTML relacionados ao elemento table: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Propriedades CSS que pode ser especialmente utéis para estilizar o elemento {{HTMLElement("caption")}}: + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> |