Bom pessoal, nessa segunda parte do artigo iremos trabalhar com a apresentação de tabelas e, inicialmente, vamos retirar o atributo border que inserirmos 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 ">
Agora sim poderemos visualizar o resultado:
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;
}
Resultado:
Aterando 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 .linhaAzul{
background-color:#E6F3FF;
}
.tabelas .linhaCinza{
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="linhaCinza"> <td>Mouse USB </td> <td>R$ 25,00 </td> </tr> <tr class="linhaAzul"> <td>Teclado Ergonômico </td> <td>R$ 30,00 </td> </tr> <tr class="linhaCinza"> <td>Monitor 17" </td> <td>R$ 450,00 </td> </tr> </table>
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 .linhaAzul{
background-color:#E6F3FF;
}
.tabelas .linhaCinza{
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!
21 Comentários
Qual a sua opinião?