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".
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:
O resultado é algo como isto:
|
| 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 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.
| 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.
| 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:
|
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.
Esta tabela tem um subtítulo no fim:
#demo-table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
|
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.
| 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:
|
| 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
|
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.
Mude a folha de estilo para fazer a tabela parecer com isto:
|
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