path: root/files/pt-pt/learn/css/building_blocks/styling_tables/index.html

---
title: Tabelas
slug: Web/CSS/Como_começar/Tabelas
tags:
  - 'CSS:Como_começar'
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
---
<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 &gt; 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">
&lt;TABLE id="data-table-1"&gt;
...
&lt;TR&gt;
&lt;TD&gt;Prefix&lt;/TD&gt;
&lt;TD&gt;0001&lt;/TD&gt;
&lt;TD&gt;default&lt;/TD&gt;
&lt;/TR&gt;
...
</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 &gt; 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>&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Documento de amostra 3&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style3.css"&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;

&lt;TABLE id="demo-table"&gt;
&lt;CAPTION&gt;Oceanos&lt;/CAPTION&gt;

&lt;THEAD&gt;
&lt;TR&gt;
&lt;TH&gt;&lt;/TH&gt;
&lt;TH&gt;Área&lt;/TH&gt;
&lt;TH&gt;Profundidade Média&lt;/TH&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;&lt;/TH&gt;
&lt;TH&gt;milhões de km&lt;SUP&gt;2&lt;/SUP&gt;&lt;/TH&gt;
&lt;TH&gt;m&lt;/TH&gt;
&lt;/TR&gt;
&lt;/THEAD&gt;

&lt;TBODY&gt;
&lt;TR&gt;
&lt;TH&gt;Ártico&lt;/TH&gt;
&lt;TD&gt;13,000&lt;/TD&gt;
&lt;TD&gt;1,200&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Atlântico&lt;/TH&gt;
&lt;TD&gt;87,000&lt;/TD&gt;
&lt;TD&gt;3,900&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Pacífico&lt;/TH&gt;
&lt;TD&gt;180,000&lt;/TD&gt;
&lt;TD&gt;4,000&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Índico&lt;/TH&gt;
&lt;TD&gt;75,000&lt;/TD&gt;
&lt;TD&gt;3,900&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Antártico&lt;/TH&gt;
&lt;TD&gt;20,000&lt;/TD&gt;
&lt;TD&gt;4,500&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TBODY&gt;

&lt;TFOOT&gt;
&lt;TR&gt;
&lt;TH&gt;Total&lt;/TH&gt;
&lt;TD&gt;361,000&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Média&lt;/TH&gt;
&lt;TD&gt;72,000&lt;/TD&gt;
&lt;TD&gt;3,800&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TFOOT&gt;

&lt;/TABLE&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</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 &gt; 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 &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
  }

#demo-table &gt; thead &gt; tr + tr &gt; 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 &gt; tfoot td {
  background-color: #cee;
  }

#demo-table &gt; tfoot &gt; 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>