Formatando Tabelas com CSS
Vou demonstrar nesse tópico algo relativamente simples, mais uma vez voltado para o público iniciante em Dreamweaver e Desenvolvimento Web em geral, mas que já conhece um pouco de XHTML e CSS: como formatar tabelas de dados com CSS.
Muitos desenvolvedores fazem como no Word: selecionam as células da tabela e, através do Painel de Propriedades (CTRL + F3), centralizam os conteúdos das células, ou ainda aplicam cor de fonte, fundo e outras manobras que só fazem com que o código cresça exponencialmente (partindo do princípio que o site pode conter inúmeras tabelas). Embora seja uma manobra errada é a mais aplicada, pela sua comodidade e muitas vezes a falta de conhecimento dos desenvolvedores. E como eu sempre digo: formatar pelo Painel Properties é a pior roubada em que um desenvolvedor pode se meter (a não ser para aplicar regras CSS previamente criadas).
Vamos deixar de blá blá blá e mãos à obra!
Software Utilizado: Adobe Dreamweaver CS4
Requisitos: Conhecer um pouco de XHTML e CSS
Considere a tabela abaixo:
É uma tabela simples, sem formatação alguma, como realmente deve ser. É um grande erro o desenvolvedor gerar conteúdo e formatá-lo ao mesmo tempo. Primeiro faça o básico, depois se preocupe em formatar. =)
– Abra o Painel CSS Styles (Shift + F11)
– Declare uma nova regra CSS (New CSS Rule)
– Preencha a sua caixa de diálogo como mostra a figura abaixo:
OBS: Conforme solicitado um conhecimento mínimo de CSS, nesse exemplo irei colocar a Rule Definition em “This document only” (gerar código CSS para esse documento e nesse documento, em seu cabeçalho), mas fica a critério do desenvolvedor se o CSS deve ser gerado em um arquivo .css (New Style Sheet File), ou mesmo um CSS já existente.
– Defina a regra .dados. Utilizei configurações básicas como exemplo:
– Clique em OK.
– Volte à página, selecione a tabela pelas suas bordas ou pela tag <table> no navegador de tags, e aplique a classe dados, que estará disponível na opção Class no Painel Properties.
O resultado será uma tabela com textos centralizados e fonte Verdana, conforme formatado. Porém, perceba que as bordas não foram atribuídas às células, e sim à tabela apenas, ou as bordas exteriores. Para resolver o problema temos que criar outra regra CSS (Painel CSS Styles novamente – New CSS Rule), com o nome de .dados td, conforme a imagem abaixo:
Explicando:
Todas as tags <td> que estiverem dentro de uma tag tomada pela classe dados serão formatadas de acordo com a regra criada. Veja como podemos eliminar vários códigos, com o auxílio da programação abaixo:
– Ao configurar como a imagem acima, aperte Apply. Você perceberá que todas as células ficaram com suas bordas pretas. Poderiam, por exemplo, ter ficado maiores, caso eu tivesse declarado altura (atributo Height, na categoria Box)…
Assim como o exemplo acima, você também pode criar uma classe para os títulos das tabelas, chamada .dados .titulo (essa classe só funcionará se estiver dentro de um objeto que tenha a classe .dados), aplicar nas primeiras células ou linha da tabela, bem como outra regra chamada .dados .par (para as linhas pares dos dados da tabela) e obter um resultado como o da imagem abaixo:
Questionamento: uma classe ou um identificador?
Simples. Um identificador faria com que essa técnica fosse usada para uma tabela exclusivamente, ao passo que uma classe permite o uso em diversas tabelas ao mesmo tempo, controlando assim o visual dos dados do seu site como um todo. Eu poderia trocar as cores de todas as tabelas do meu site apenas com essas quatro configurações (desde que elas estivessem escritas em um arquivo .css externo, e não no mesmo arquivo, claro…).
As duas técnicas geram o mesmo resultado, com a diferença de ID ser destinado a uma região apenas. Aí vai de você definir… se será necessário aplicar a técnia em várias tabelas ao mesmo tempo (considerando mais de uma por página) ou se haverá apenas uma tabela por página. No primeiro caso a classe é o melhor modo. Já no segundo o identificador (ID) atende melhor, considerando até mesmo implantação de AJAX e menor uso de regras CSS.
Fonte: http://www.mxstudio.com.br/desenvolvimento/dreamweaver/formatando-tabelas-com-css/