Bom pessoal, nessa segunda parte do artigo iremos trabalhar com a apresentação de tabelas e, inicialmente, vamos retirar o atributo border que inserimos na primeira parte. A tabela que iremos trabalhar tem o seguinte código:
<table summary="Tabela de produtos e preços"> <caption align="top">Tabela de Produtos</caption> <tr> <th scope="col">Produto</th> <th scope="col">Preço</th> </tr> <tr> <td>Mouse USB </td> <td>R$ 25,00 </td> </tr> <tr> <td>Teclado Ergonomico </td> <td>R$ 30,00 </td> </tr> <tr> <td>Monitor 17" </td> <td>R$ 450,00 </td> </tr> </table>
Em um browser essa tabela aparecerá sem bordas e não podermos ver exatamente como é a sua apresentação padrão, mas se visualizarmos essa tabela em um editor visual de HTML teremos uma idéia de como ela está sendo apresentada:
Existe um pequeno cellpading (atributo de espaçamento interno nas células) e cellspacing (atributo de espaçamento entre
uma célula e outra) default. Mais a frente vamos alterar esses espaços com o CSS.
Inserindo Bordas
Vamos usar o seguinte código CSS para inserir bordas em nossa tabela:
.tabelas{ border-color: #990000; border-style: solid; border-width: 1px; } .tabelas th, .tabelas td{ border-color: #6633CC; border-style: solid; border-width: 1px; }
Observações: Vou evitar usar os resumos das propriedades CSS (shorthands) para que o código fique mais legível e compreensível. Se você tiver um bom domínio de CSS sinta-se livre para escrever como quiser.
Antes de visualizarmos a tabela alterada é necessário inserir o atributo class com o valor tabelas dentro da tag <table>:
<table class="tabelas" summary="Tabela de produtos e preços ">
Coloquei as cores azul e vermelho para diferenciar bem a borda das células e da tabela. A tag <th> apesar de atuar como cabeçalho também é tratada como célula na apresentação.
Vamos resolver o problema dos espaçamento inserindo a propriedade border-colapse na classe .tabelas.
.tabelas{ border-color: #990000; border-style: solid; border-width: 1px; border-collapse:collapse; }
Em alguns Browser que são mais fiéis aos padrões a tabela será exibida sem a borda vermelha.
No IE a tabela será exibida com a borda externa vermelha e a borda interna azul.
Para evitar esse tipo de problema, sempre defina as bordas da tabela e células da mesma cor:
.tabelas{ border-color: #6633CC; border-style: solid; border-width: 1px; border-collapse:collapse; } .tabelas th, .tabelas td{ border-color: #6633CC; border-style: solid; border-width: 1px; }
Mudando o cabeçalho
Para mudar o cabeçalho em nossa tabela é bem simples. Já que usamos uma estrutura mais otimizada com a tag <th> basta
somente alterar as propriedades CSS desta tag. Vamos inserir um background cinza para o cabeçalho. Para isso vamos inserir a seguinte regra CSS:
.tabelas th{ background-color:#CCCCCC; }
Alterando o Caption
O caption por padrão é centralizado. Podemos o seu background, alinhamento, fonte etc. Existe uma propriedade CSS,
caption-side, que permite até a mudança de posição do caption, mas eu meus testes funcionou somente no Firefox. Vamos mudar um pouco o nosso caption:
.tabelas caption{ text-align: left; color:#0000CC; font-weight: bold; }
Alternando a cor da linhas
Para criar o efeito visual de linhas alternadas, vamos criar
duas classes com propriedades de background diferentes:
.tabelas .linhaPar{ background-color:#E6F3FF; } .tabelas .linhaImpar{ background-color:#eeeeee; }
Para visualizar a mudança é necessário inserir o atributo class nas tags <tr>:
<table class="tabelas" summary="Tabela de produtos e preços"> <caption align="top">Tabela de Produtos</caption> <tr> <th scope="col">Produto</th> <th scope="col">Preço</th> </tr> <tr class="linhaImpar"> <td>Mouse USB </td> <td>R$ 25,00 </td> </tr> <tr class="linhaPar"> <td>Teclado Ergonômico </td> <td>R$ 30,00 </td> </tr> <tr class="linhaImpar"> <td>Monitor 17" </td> <td>R$ 450,00 </td> </tr> </table>
OBS.: Pensando semanticamente em
Ajustes Finais
Segue abaixo o código com algumas modificações de espaçamento e fonte:
.tabelas{ border-color: #6633CC; border-style: solid; border-width: 1px; border-collapse:collapse; } .tabelas th, .tabelas td{ border-color: #6633CC; border-style: solid; border-width: 1px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding: 3px; } .tabelas th{ background-color:#CCCCCC; } .tabelas caption{ text-align: left; color:#0000CC; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding-bottom: 7px; } .tabelas .linhaPar{ background-color:#E6F3FF; } .tabelas .linhaImpar{ background-color:#eeeeee; }
Consideracões Finais
Nosso exemplo foi bem simples, mas pode e deve ser aplicado em tabelas com maior quantidade de informações. Editores HTML criam uma apresentação errada de tabelas gerando atributos de apresentação. Quando usar editores de HTML procure otimizar o código manualmente.
Abraço a todos!