Tabelas Semânticamente Corretas (Parte 02) - Lauro Santos
Tabelas Semânticamente Corretas (Parte 02)
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>
<td>Mouse USB </td>
<td>R$ 25,00 </td>
<td>Teclado Ergonomico </td>
<td>R$ 30,00 </td>
<td>Monitor 17" </td>
<td>R$ 450,00 </td>
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.
Vamos usar o seguinte código CSS para inserir bordas em nossa tabela:
.tabelas{
.tabelas th, .tabelas td{
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.
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:
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{
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{
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{
Para visualizar a mudança é necessário inserir o atributo class nas tags <tr>:
<table class="tabelas" summary="Tabela de produtos e preços">
<tr class="linhaImpar">
<tr class="linhaPar">
<td>Teclado Ergonômico </td>
OBS.: Pensando semanticamente em
Segue abaixo o código com algumas modificações de espaçamento e fonte:
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.