Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Os seus resultados da pesquisa

    Tabelas

    Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.

    Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.

    Informação: Mais seletores

    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.

    Aqui está um sumário de seletores baseados em relações:

    Seletor Seleciona
    A E Qualquer elemento E que seja descendente de um elemento A (isso é: um subitem, ou um subitem de um sub item, etc.)
    A > E Qualquer elemento E que seja subitem de um elemento A
    E:first-child Qualque elemento E que seja o primeiro subitem do seu principal
    B + E Qualquer elemento E que seja o próximo irmão de um elemento B (isso é: o próximo subitem do mesmo principal)

    Você pode combinar isto para expressar relações complexas.

    Você pode também usar o símbolo * (asterisco) para dizer "qualquer elemento".

    Exemplo
    Uma tabela HTML tem um atributo id, mas suas linhas e células não tem identificadores individuais:
    <TABLE id="data-table-1">
    ...
    <TR>
    <TD>Prefix</TD>
    <TD>0001</TD>
    <TD>default</TD>
    </TR>
    ...
    

    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:

    1. data-table-1 td:first-child {font-weight: bolder;}
    2. data-table-1 td:first-child + td {font-family: monospace;}

    O resultado é algo como isto:

    Prefix 0001 default
    Mais detalhes
    De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade.

    Usando estas técnicas, você evita precisar especificar atributos class ou id em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.

    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.

    Para detalhes completos sobre seletores, veja Selectors em CSS Specification.

    Informação: Tabelas

    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.

    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.

    Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (Disposição) são melhores para isto.

    Estrutura da tabela

    Em uma tabela, cada peça de informação é exibida em uma célula.

    As células em uma linha horizontal na página compõem uma linha.

    Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o cabeçalho. Um grupo especial de linhas no final da tabela é o rodapé. As linhas principais na tabela são o corpo, e elas podem também estar em grupos.

    As células em uma linha vertical na página compõem uma coluna, mas as colunas têm usos limitados nas tabelas das CSS.

    Exemplo
    A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas.

    A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.

    Ela tem duas colunas.

    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 expandam (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.

    Bordas

    Células não têm margens.

    Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade border-spacing da tabela. Você pode também remover o espaçamento completamente configurando a propriedade border-collapse da tabela para collapse.

    Exemplo
    Aqui estão três tabelas.

    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:

    Paus Copas
    Ouros Espadas
    Paus Copas
    Ouros Espadas
    Paus Copas
    Ouros Espadas

    Subtítulos

    Um subtítulo é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.

    Para mover isto para o fim, configure a propriedade caption-side para bottom. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.

    Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.

    Exemplo
    Esta tabela tem um subtítulo no fim:
    #demo-table > caption {
      caption-side: bottom;
      font-style: italic;
      text-align: right;
      }
    
    Naipes
    Paus Copas
    Ouros Espadas

    Células vazias

    Você pode exibir células vazias (isto é, suas bordas e fundos) especificando empty-cells: show; para o elemento da tabela.

    Você pode escondê-los especificando empty-cells:hide;. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.

    Exemplo
    Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro.

    Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:

      Copas
    Ouros Espadas
      Copas
    Ouros Espadas
    Mais detalhes
    Para informações detalhasdas sobre tabelas, veja Tables em CSS Specification.

    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.

    Ação: Estilizando uma tabela

    Faça um novo documento HTML, doc3.html. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:

    <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>
    

    Crie uma nova folha de estilo, style3.css. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:

    /*** 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;
      }
    

    Abra o documento no seu navegador. Deve ser muito similar a este:

    Oceanos

      Área Profundidade média
      milhões de km2 m
    Ártico: 13,000 1,200
    Atlântico: 87,000 3,900
    Pacífico: 180,000 4,000
    Índico: 75,000 3,900
    Antártico: 20,000 4,500
    Total: 361,000  
    Média: 72,000 3,800

    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.

    Aqui estão algumas notas sobre esta tabela:

    • O subtítulo encontra-se fora da borda da tabela.
    • Se você tiver um tamanho mínimo do ponto ajustado nas Opções, isto pode afetar o sobre-escrito no km2.
    • 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.
    • As colunas são adicionadas pela folha de estilos.
    Desafios
    Mude a folha de estilo para fazer a tabela parecer com isto:
      Área Profundidade média
      milhões de km2 m
    Ártico: 13,000 1,200
    Atlântico: 87,000 3,900
    Pacífico: 180,000 4,000
    Índico: 75,000 3,900
    Antártico: 20,000 4,500
    Total: 361,000  
    Média: 72,000 3,800

    Oceanos

    O que vem depois?

    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 Discussão.

    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 Full property table em CSS Specification.

    A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: Mídia

    Etiquetas do documento e colaboradores

    Etiquetas: 
    Contributors to this page: Verruckt, Leandro Mercês Xavier, fscholz, teoli
    Última atualização por: fscholz,