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>
 <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:

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!