:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 12 - Estilizando tabelas

Embora as tabelas venham sendo usadas para layout desde as eras negras da Web, penso que devo mostrá-las aqui, para mostrar que layout construido com CSS oferece muito mais escopo e versatilidade. Tabelas tem por razão de ser e finalidade, a apresentação de dados tabulares, aquelas coisas que normalmente são colocadas em 'folha de dados' onde você precisa de linhas e colunas para relacionar textos ou mesmo figuras.

Nos tempos antigos (e de navegadores hoje ultrapassados) você alterava a apresentação de uma tabela e de suas células, usando várias propriedades - cores de fundo, imagens de fundo, etc. Uma grande quantidade destes atributos atualmente está em desuso e há algum tempo já não são mais válidos - muito embora eles hoje ainda funcionem, para o futuro é bom não contar com eles. Na verdade é melhor que você não conte com eles desde já. Se você tentar colocar uma imagem de fundo que seja renderizada no Netscape 4 ou anterior tera que repetí-la para cada célula individualmente, como se tivesse dividido a imagem em múltiplas partes, tornando a tarefa pouco usual e frustrante.

A prática usual de definir uma altura e uma largura para a tabela em pixel ou em percentagem não é mais válida. Tabelas devem se auto ajustar em dimensões ao seu conteúdo.

A estilização de tabelas com CSS tem seus macetes próprios e nem sempre é simples e imediata. Você poderá construir sua estrutura de tabela usando display:table; and display:table-cell; no qual cada célula é uma div, e para fins de estilizações usar os elementos HTML de tabelas - table , tr , td , th , etc - com a finalidade de facilitar a tarefa.

tr é uma linha da tabela, uma fila horizontal de células. td e uma divisão de uma linha da tabela. Você deve estar pensando em coluna, mas o comportamento não é de coluna e você não pode colocar uma imagem de fundo na coluna ou estilizar.

As tabelas herdam alguns estilos das DIV's em que forem colocadas, alguns, mas não todos os estilos. Se você definir font-family: verdana, arial, sans-serif e color: #009 , para o corpo (body) de sua página, as tabelas herdarão estas definições, mas não herdarão tamanhos de fontes e nem alinhamentos de textos. Há também uma hierarquia para os elementos de tabelas. Uma definição para td prevalece sobre uma para tr, que por sua vez prevalece sobre aquelas para table. Você pode tirar vantagem desta hierarquia. Se você definir uma cor preta para fundo da tabela e uma cor branca para td e um cellspacing="2", você terá uma tabela com com células brancas e uma borda preta de 2px ao redor.

Ver Tabela 1. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha pra o fundo das tds.

Ver Tabela 2. De acordo com os dados contidos na tabela você poderá dar maior ênfase às linhas horizontais ou às colunas verticais.

Ver Tabela 3. Aqui um efeito de alto relevo em 3D conseguido através de definições de estilos para as cores das bordas. Para as linhas do cabeçalho da tabela foi definida uma cor escura.

Ver Tabela 4. Usei um gradiente para as linhas do cabeçalho e uma borda esquerda na cor cinza clara para separar as colunas.

As possibilidades de estilização de tabelas são muitas. Quem disse que as tabelas tem que ser entediantes?

Navegação pelo tutorial

1. » Introdução - página básica
2. » Folha de estilos
3. » Estilizando texto
4. » Mais texto
5. » As listas
6. » Os links
7. » Boxes CSS
8. » DIV's
9. » Juntando tudo
10. » DOCTYPE
11. » Estilos externos
12. » Estilizando tabelas
13. » Estilizando formulários
14. » Browsers
15. » O futuro

Criado em: 2005-04-14