diff options
Diffstat (limited to 'files/pt-pt/learn/css/building_blocks/styling_tables/index.html')
| -rw-r--r-- | files/pt-pt/learn/css/building_blocks/styling_tables/index.html | 656 |
1 files changed, 656 insertions, 0 deletions
diff --git a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..8967f90eb8 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,656 @@ +--- +title: Tabelas +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - CSS:Como_começar +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/CSS/Como_começar/Tabelas +--- +<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p> + +<p>Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.</p> + +<p>Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Mais_seletores" name="Informa.C3.A7.C3.A3o:_Mais_seletores">Informação: Mais seletores</h2> + +<p>CSS possui algumas maneiras para selecionar elementos baseadas nas relações entre eles. Você pode usá-las para fazer seletores que sejam mais específicos.</p> + +<p>Aqui está um sumário de seletores baseados em relações:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Seletor</strong></td> + <td><strong>Seleciona</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Qualquer elemento E que seja <em>descendente</em> de um elemento A (isso é: um subitem, ou um subitem de um sub item, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Qualquer elemento E que seja subitem de um elemento A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Qualque elemento E que seja o primeiro subitem do seu principal</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Qualquer elemento E que seja o próximo <em>irmão</em> de um elemento B (isso é: o próximo subitem do mesmo principal)</td> + </tr> + </tbody> +</table> + +<p>Você pode combinar isto para expressar relações complexas.</p> + +<p>Você pode também usar o símbolo <code>*</code> (asterisco) para dizer "qualquer elemento".</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Uma tabela HTML tem um atributo <code>id</code>, mas suas linhas e células não tem identificadores individuais: + <div style="width: 30em;"> + <pre class="eval"> +<TABLE id="data-table-1"> +... +<TR> +<TD>Prefix</TD> +<TD>0001</TD> +<TD>default</TD> +</TR> +... +</pre> + </div> + + <p>Estas regras fazem a primeira célula em cada linha em negrito, e a segunda célula em cada linha monoespaçada. Elas afetam somente uma tabela específica no documento:</p> + + <div style="width: 45em;"> + <ol> + <li>data-table-1 td:first-child {font-weight: bolder;}</li> + <li>data-table-1 td:first-child + td {font-family: monospace;}</li> + </ol> + </div> + + <p>O resultado é algo como isto:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade. + <p>Usando estas técnicas, você evita precisar especificar atributos <code>class</code> ou <code>id</code> em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.</p> + + <p>Em grandes projetos onde a velocidade é importante, você pode fazer suas folhas de estilo mais eficientes evitando regras complexas que dependem da relação entre elementos.</p> + + <p>Para detalhes completos sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Informa.C3.A7.C3.A3o:_Tabelas" name="Informa.C3.A7.C3.A3o:_Tabelas">Informação: Tabelas</h2> + +<p>Uma tabela é um arranjo de informação em uma grade retangular. Algumas tabelas podem ser complexas, e para tabelas complexas diferentes navegadores podem exibir diferentes resultados.</p> + +<p>Quando você desenha seu documento, use e a tabela para expressar as relações entre as peças da informação. Então não importará se os diferentes navegadores apresentarem a informação de maneiras levemente diferentes, pois o significado ainda pode ser compreendido.</p> + +<p>Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a>) são melhores para isto.</p> + +<h4 id="Estrutura_da_tabela" name="Estrutura_da_tabela">Estrutura da tabela</h4> + +<p>Em uma tabela, cada peça de informação é exibida em uma <em>célula</em>.</p> + +<p>As células em uma linha horizontal na página compõem uma <em>linha</em>.</p> + +<p>Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o <em>cabeçalho</em>. Um grupo especial de linhas no final da tabela é o <em>rodapé</em>. As linhas principais na tabela são o <em>corpo</em>, e elas podem também estar em grupos.</p> + +<p>As células em uma linha vertical na página compõem uma <em>coluna</em>, mas as colunas têm usos limitados nas tabelas das CSS.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas. + <p>A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.</p> + + <p>Ela tem duas colunas.</p> + </td> + </tr> + </tbody> +</table> + +<p>Este tutorial somente cobre tabelas simples, onde os resultados são razoavelmente previsíveis. Em uma tabela simples, toda célula ocupa somente uma linha e coluna. Você pode usar CSS para tabelas complexas onde células <em>expandam</em> (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.</p> + +<h3 id="Bordas" name="Bordas">Bordas</h3> + +<p>Células não têm margens.</p> + +<p>Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade <code>border-spacing</code> da tabela. Você pode também remover o espaçamento completamente configurando a propriedade <code>border-collapse</code> da tabela para <code>collapse</code>.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Aqui estão três tabelas. + <p>A tabela da esquerda tem espaçamento de borda 0.5 em. A tabela do centro tem espaçamento da borda zero. A tabela da direita tem bordas unidas:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Paus</td> + <td style="border: 1px solid #c00; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Ouros</td> + <td style="border: 1px solid #c00; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Paus</td> + <td style="border: 1px solid #c00; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Ouros</td> + <td style="border: 1px solid #c00; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Paus</td> + <td style="border: 1px solid #c00; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Ouros</td> + <td style="border: 1px solid #c00; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="Subt.C3.ADtulos" name="Subt.C3.ADtulos">Subtítulos</h3> + +<p>Um <em>subtítulo</em> é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.</p> + +<p>Para mover isto para o fim, configure a propriedade <code>caption-side</code> para <code>bottom</code>. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.</p> + +<p>Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta tabela tem um subtítulo no fim: + <div style="width: 30em;"> + <pre class="eval"> +#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; + } +</pre> + </div> + + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption>Naipes</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Paus</td> + <td style="border: 1px solid gray; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Ouros</td> + <td style="border: 1px solid gray; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="C.C3.A9lulas_vazias" name="C.C3.A9lulas_vazias">Células vazias</h3> + +<p>Você pode exibir células vazias (isto é, suas bordas e fundos) especificando <code>empty-cells: show;</code> para o elemento da tabela.</p> + +<p>Você pode escondê-los especificando <code>empty-cells:hide;</code>. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro. + <p>Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Para informações detalhasdas sobre tabelas, veja <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification. + <p>A informação lá vai além do que há neste tutorial, mas não cobre as diferenças entre os navegadores que podem afetar tabelas complexas.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Estilizando_uma_tabela" name="A.C3.A7.C3.A3o:_Estilizando_uma_tabela">Ação: Estilizando uma tabela</h2> + +<p>Faça um novo documento HTML, <code>doc3.html</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Documento de amostra 3</TITLE> +<LINK rel="stylesheet" type="text/css" href="style3.css"> +</HEAD> +<BODY> + +<TABLE id="demo-table"> +<CAPTION>Oceanos</CAPTION> + +<THEAD> +<TR> +<TH></TH> +<TH>Área</TH> +<TH>Profundidade Média</TH> +</TR> +<TR> +<TH></TH> +<TH>milhões de km<SUP>2</SUP></TH> +<TH>m</TH> +</TR> +</THEAD> + +<TBODY> +<TR> +<TH>Ártico</TH> +<TD>13,000</TD> +<TD>1,200</TD> +</TR> +<TR> +<TH>Atlântico</TH> +<TD>87,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Pacífico</TH> +<TD>180,000</TD> +<TD>4,000</TD> +</TR> +<TR> +<TH>Índico</TH> +<TD>75,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Antártico</TH> +<TD>20,000</TD> +<TD>4,500</TD> +</TR> +</TBODY> + +<TFOOT> +<TR> +<TH>Total</TH> +<TD>361,000</TD> +<TD></TD> +</TR> +<TR> +<TH>Média</TH> +<TD>72,000</TD> +<TD>3,800</TD> +</TR> +</TFOOT> + +</TABLE> + +</BODY> +</HTML> +</pre> +</div> + +<p>Crie uma nova folha de estilo, <code>style3.css</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** Estilo para doc3.html (Tabelas) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; + } + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; + } + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; + } + +#demo-table th { + font-weight: bold; + padding-left: .5em; + } + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; + } + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; + } + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; + } + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; + } + +#demo-table tbody th:after { + content: ":"; + } + + +/* footer */ +#demo-table tfoot { + font-weight: bold; + } + +#demo-table tfoot th { + color: blue; + } + +#demo-table tfoot th:after { + content: ":"; + } + +#demo-table > tfoot td { + background-color: #cee; + } + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; + } +</pre> +</div> + +<p>Abra o documento no seu navegador. Deve ser muito similar a este:</p> + +<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceanos</p> + + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Área</th> + <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Ártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlântico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacífico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Índico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Média:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Compare estas regras em sua folha de estilo com a tabela exibida, para se assegurar de que entende o efeito de cada regra. Se você achou uma regra com a qual não está seguro sobre, descomente-a e atualize o navegador para ver o que acontece.</p> + +<p>Aqui estão algumas notas sobre esta tabela:</p> + +<ul> + <li>O subtítulo encontra-se fora da borda da tabela.</li> + <li>Se você tiver um tamanho mínimo do ponto ajustado nas Opções, isto pode afetar o sobre-escrito no km<sup>2</sup>.</li> + <li>Existem três células vazias. Duas delas permitem que o fundo da tabela apareça através. A terceira tem um fundo e uma borda no topo.</li> + <li>As colunas são adicionadas pela folha de estilos.</li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Mude a folha de estilo para fazer a tabela parecer com isto: + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Área</th> + <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Ártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlântico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacífico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Índico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Média:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceanos</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3> + +<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor combribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Tabelas" title="Talk:pt/CSS/Como_começar/Tabelas">Discussão</a>.</p> + +<p>Esta é a última página deste tutorial que foca as propriedades e valores das CSS. Para um sumário completo de propriedades e valores, veja <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> em CSS Specification.</p> + +<p>A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: <strong><a href="/pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="pt/CSS/Como_começar/Mídia">Mídia</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p> |