No meio disso muitos não estão percebendo que várias conquistas resultantes de muito esforço estão sendo esquecidas. Brigamos muito para que os padrões atuais fossem mais usados, que as interfaces web melhorassem em semântica, acessibilidade. Tudo isso conseguindo através do uso de padrões por desenvolvedores e que eles fossem adotados pelos de browsers, dispositivos e tecnologias assistivas.

Ainda temos muitas páginas na web com layouts em tabelas, mal formatadas e semanticamente desestruturadas. Muitos ainda não sabem desenvolver em HTML/XHTML e CSS e só conseguem criar páginas com a ajuda de editores WYSIWYG.

Fim do XHTML 2 e ascensão do HTML 5

O XHTML foi criado para colocar uma ordem ao caos, usando o parseamento XML as páginas web se tornaram mais organizadas, isso abriu espaço para a semântica de código e de conteúdo uma vez que tags e atributos de foram eliminados. As páginas passaram a ser mais otimizadas e de fácil processamento. O que levou a uma melhoria na renderização de páginas em dispositivos com pouco poder de processamento.

Ainda não é seguro usar as especificações de XHTML e CSS e sua plenitude porque alguns browsers (leia-se Internet Explorer) ainda não dão suporte pleno a esses padrões.

Há um tempo atrás os novos padrões XHTML 2 e  HTML 5 foram propostos e com isso surgiram dois grupos de desenvolvimento separados. Não entendi bem a necessidade da criação de dois novos padrões e aposto que muitos não entenderam também. O que era esperado acabou acontecendo até antes do previsto com o anuncio da W3 sobre o fim do grupo de trabalho do XHTML 2 no final de 2009.

Agora estamos assistindo a ascensão do HTML 5, que vem trazendo muitas novidades como estruturas semânticas, validação de formulários, mas ao mesmo tempo existe um seguimento excitado com a volta das más práticas do HTML 4 tais como:  codificação em letras maiúsculas, atributos sem valor, case-insensitive etc.

É possível codificar o HTML 5 usando o parseamento do XHTML, esta metodologia está sendo denominada de XHTML 5. Então porque não usar?

Estou vendo muitos exemplos das novas funcionalidades para a validação de formulários com HTML 5 usando atributos sem valores e tags em letras maiúsculas. Isso é um fato que me preocupa bastante porque se os disseminadores da tecnologia continuarem a divulgá-la ignorando as boas práticas de codificação teremos um problema sério em um futuro próximo.

CSS3

No CSS3 a criação de propriedades proprietárias na implementação da linguagem em Browsers pode estar gerando outro problema. Estão sendo usados prefixos como webkit Mozilla. Porque não estão sendo usadas as propriedades com o nome proposto sem o sufixo?

Até hoje sofremos na implementação de JavaScript em diferentes browsers. Será que essa novela irá se repetir com o CSS3?

Ainda estamos no começo

Os browsers ainda estão dando suporte parcial a HTML 5 e CSS 3. Isso não nos impede de começarmos a testar as suas novidades, mas ainda em nível experimental ou fornecendo alternativas a funcionalidades que ainda não são suportadas em outros browsers.

Opera, Firefox e Browsers Web Kit já estão dando suporte parcial a alguns recursos. A Microsoft ainda está trabalhando na nova versão do Internet Explorer prometendo dar um suporte aos padrões.

À medida que testo os novos padrões estarei publicando exemplos aqui no blog.

Se quiser se interar mais no assunto visite alguns links interessantes:

http://www.w3.org/2009/06/xhtml-faq.html

http://html5doctor.com/

http://www.whatwg.org/specs/web-apps/current-work/

Artigos relacionados:

1. Browsers e suporte a Web Standards Acid Test3 e seletores CSS
2. Novos Browsers e suporte a CSS (Atualização)
3. Lançado novo Safari 3

Uma avaliação anterior e completa pode ser visualizada no post Novos Browsers e suporte a seletores CSS.

Desde essa última avaliação o suporte a Web Standards tem melhorado bastante, com excessão do Internet Explorer da Microsoft.

A Microsoft prometeu que o Internet Explorer 8 seria fiel aos padrões estabelecidos pela W3, mas não passo da promessa, pois o IE 8 melhorou mas continua sendo o pior browser do mercado e só  lidera nas estáticas porque é imposto como browser do sistema operacional Windows.

Parece que agora o IE tem um concorrente a nível de marketing. O Chrome browser do Google tem a sua engine baseada no Web Kit que é a mesma do Safari. O Google já está sugerindo o seu browser, mas ainda de uma maneira sutil, talvez não queira cometer o mesmo erro de imposição da Microsoft.

IE 8
Acid test 3  20/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
22 ok
1  bug
20 não suportados
349/578 testes
Safari 4
Acid test 3  100/100
suporte a seletores CSS
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes
Firefox 3.5
Acid test 3 93/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes

Chrome 2.0.172.31
Acid test 3 71/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes

Ainda Em beta:

Opera 10
Acid test 3 99/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes

Como vocês podem conferir acima o Firefox na versão 3.5 está com suporte a todos os seletores CSS, algo que já tinha sido alcançado pelo Safari e Chrome e Opera. Já no AcidTest 3 somente o Safari, Chrome e Opera 10(beta) conseguem passar no teste, O Firefox melhorou muito no teste com uma marca de 93/100.

Bom temos ótimos browsers no mercado, mas infelizmente não podemos usar recursos avançados de CSS e Javascript porque a maioria do público da internet ainda usa o IE que é imposto pelo Microsoft nos sistema operacional Windows que tem a maior fatia do mercado. Um luz de esperança foi lançada pelo Google com o lançamento do Chrome mas a campanha desse browser ainda está bem tímida talvez porque a postura do Google não é de impor e sim de conquistar o seus usuários. Sendo assim resta a nós fazermos a nossa parte mostrando que existem outras opções de browser de internet.

Testes realizados em:
http://acid3.acidtests.org/
http://www.css3.info/selectors-test/test.html

Artigos relacionados:

1. Novos Browsers e suporte a seletores CSS
2. Novos Browsers e suporte a CSS (Atualização)
3. Chrome – Google lança novo browser

Muitas pessoas usam o atributo alt em imagens esperando o hint que aparece quando o cursor do mouse é posicionado sobre a imagem, mas no Firefox isso não acontece. Alguns que não conhecem as reais funcionalidades desse atributo falam que é um erro do Firefox, Opera, Safari etc.

Comportamento do atributo ALT no IE e browsers modernos

O hint que aparece quando o cursor do mouse está sobre uma imagem não é papel do ALT e sim do atributo TITLE. Nos browsers que seguem mais a risca as especificações de Web Standards o hint só poderá ser visto com o uso do atributo TITLE.

Você deve estar pensando agora que isso é um erro do IE. Alguns podem ter esse ponto de vista, mas você vai perceber que quando insere um atributo TITLE em uma imagem o IE ele substitui o ALT no hint. Já que isso acontece podemos entender que o IE simplesmente usa o ALT em mais uma funcionalidade caso o usuário não esteja usando o atributo TITLE, mesmo assim seria melhor que ele seguisse a especificação para não gerar confusões.

Usando corretamente o atributo ALT

Vamos esclarecer então para que serve o atributo ALT. Como a própria abreviação sugere o atributo ALT se refere a um texto alternativo e deve ser usado nos seguintes contextos:

1. Texto alternativo para imagens. Quando um usuário desabilita o carregamento de imagens em seu browser ou dispositivo o texto do alt é exibido no lugar da imagem. No caso de algum erro acontecer no carregamento da imagem o texto alternativo também será exibido. Caso a imagem possua algum link a sua funcionalidade também poderá ser referenciada no alt, aumentando assim a usabilidade caso a imagem não seja carregada.
2. Texto alternativo para acessibilidade. Leitores de tela e leitores de código usados por portadores de necessidades especiais irão ler o atributo alt para descrever a imagem.

Só para salientar o atributo ALT  e de uso obrigatório para imagens.

Atributo ALT e SEO

O atributo ALT também pode ser usado para otimização de conteúdo on-page, mas com muito bom senso.

Uma das primeiras regras ao se otimizar o uso de palavras chave é se lembrar que o conteúdo em primeiro lugar deve ser criado para os usuários e não para sistema de busca. Em se tratando de acessibilidade e o uso do atributo ALT para imagens essa regra também deve ser seguida. Apesar do texto do ALT não ser lido normalmente na página, ele vai ser usado por leitores de tela e de código. Sendo assim não se deve inserir somente palavras chave no texto do ALT e sim escrever uma descrição condizente com o conteúdo da imagem em equilíbrio com a inserção de palavras chave.

Erros quanto ao uso e não uso do atributo ALT

Existem erros muito comuns quanto a aplicação do Atributo ALT, vou numerar alguns deles abaixo:

1. O não uso do Atributo ALT que é obrigatório para imagens de conteúdo.
2. Atributo ALT vazio somente para passar em validações de código. Todo atributo ALT deve ter uma pequena descrição da imagem.
3. Atributo ALT vazio gerado por editores de código. Diversos editores de código e editores visuais inserem automaticamente o atributo ALT vazio. Por isso afirmo que o código deve ser verificado antes de sua publicação, pois nenhum editor HTML é perfeito.
4. Atributo ALT igual para todas as imagens de conteúdo de uma página.
5. Atributo ALT somente para gerar hint do mouse. Como explicado acima o hint é uma funcionalidade do atributo Title. Caso tenha necessidade do hint use o atributo TITLE em conjunto com o ALT mas usando textos diferentes, pois os leitores de tela e código não entendem o TITLE. E lembrando mais uma vez o ALT é obrigatório.

Artigos relacionados:

1. Tabelas Semânticamente Corretas
2. Tabelas Semânticamente Corretas (Parte 02)

Essa versão ainda não dá suporte a seletores CSS (de 43 seletores 36 passaram,  7 tipos de seletores não são totalmente suportados). A equipe de desenvolvimento garante que o suporte será melhorado na versão 3.1 do e na versão 4.0 o suporte será total. Veja essa informação no Mozilla Wiki.  Os seus concorrentes Opera 9.5 e o Safari 3 já conseguiram passar no teste e esse suporte completo é muito esperado também para no Firefox.

O Firefox 3 ainda não passou no AcidTest 3 e ficou com um score (71) menor do que o Opera 9.5 (85) e do Safari (75).

O Browser continua sendo o mais popular depois do IE (popular por imposição) e sua flexibilidade na a instalação de novas funcionalidades ainda é incomparável.

Artigos relacionados:

1. Lançado novo Safari 3
2. Chrome – Google lança novo browser
3. Novos Browsers e suporte a CSS (Atualização)

O Safari oferece também suporte a algumas especificacões do CSS 3 (ainda em desenvolvimento) usando a engine Webkit.

Artigos relacionados:

1. Lançado o novo Firefox 3
2. Novos Browsers e suporte a CSS (Atualização)
3. Safari beta para Windows

Opera 9.5
- Suporte completo 43
- 0 com bugs
- 0 não suportados
- Suporte a 578 variações

Firefox 3.0 b4
- Suporte completo 36
- 0 com bugs
- 7 não suportados
- Suporte à 373 de 578

IE 8.0.60001
- Suporte completo 14
- 4 com bugs
- 25 não suportados
- Suporte à 335 de 578

Safari 3.0.4
- Suporte completo 25
- 9 com bugs
- 9 não suportados
- Suporte à 346 de 578

Testes realizados no site CSS3.info

Comparado com o resultado anterior vemos que a equipe do Firefox tá fazendo a sua parte, pois todos os bugs foram eliminados e agora o versão mais atual do beta possui suporte completo a 36 seletores. O Safari continua com o mesmo suporte mesmo lançando uma versão atual do beta. O Internet Explorer 8 que veio prometendo se preocupar com os padrões por enquanto não mostrou que mudou muito em relação a versão 7, somente o problema de um  seletor que não era suportado foi resolvido.

Concluindo o Opera 9.5 beta ainda continua soberano com suporte completo a selectores CSS.

Artigos relacionados:

1. Novos Browsers e suporte a seletores CSS
2. Browsers e suporte a Web Standards Acid Test3 e seletores CSS
3. Lançado novo Safari 3

O Firefox possui algumas das funcionalidades implementadas mas o Safari sai na frente. E esses dois browsers fazem uso de prefixos -moz- e webkit nas propriedades, o que não é uma coisa muito bacana porque faz a gente lembrar da época das Tags proprietárias do IE e Netscape.

Se quiser pode instalar o módulo de voz no Opera e testar as funcionalidades de Speech do CSS 3.

Artigos relacionados:

1. Safari beta para Windows
2. HTML 5 e CSS 3
3. Browsers e suporte a Web Standards Acid Test3 e seletores CSS

Para termos uma idéia mais exata da importância desse suporte basta compararmos com o suporte nas versões atuais nos Browsers para Windows:

Firefox 2.0.0.6
- Suporte completo 26
- Com bugs 10
- 7 não suportados
- Suporte a 357 variações

IE 7
- Suporte completo 13
- Com bugs 4
- 26 não suportados
- Suporte a 330 variações

IE 6
- Suporte completo 10
- Com bugs 1
- 32 não suportados
- Suporte a 330 variações

Agora vamos ver o suporte das novas versões de Browser para Windows:

Firefox 3 alpha
- Suporte completo 32
- Com bugs 4
- 7 não suportados
- Suporte a 369 variações

Safari 3.0.3 beta
- Suporte completo 25
- Com bugs 9
- 9 não suportados
- Suporte a 346 variações

Opera 9.5
- Suporte completo 43
- Com bugs 0
- 0 não suportados
- Suporte a 578 variações

Mas infelizmente o IE ainda é o browser de maior fatia do mercado.
Nós desenvolvedores podemos fazer a nossa parte disseminando o uso de browsers que se importam com o suporte a Web Standards.

Artigos relacionados:

1. Novos Browsers e suporte a CSS (Atualização)
2. Browsers e suporte a Web Standards Acid Test3 e seletores CSS
3. Lançado o novo Firefox 3

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

Artigos relacionados:

1. Tabelas Semânticamente Corretas
2. Tabelas Semânticamente Corretas
3. Novo GTalk (Google Talk) com perfil invisível

As tabelas foram criadas para dados tabulares, mas por serem um meio muito amigável de aninhar a estrutura de uma página, foram e ainda são muito usadas para layout. Há alguns anos não uso mais tabelas para layout, nos cursos de Dreamweaver no qual eu ministro aulas explico aos meus alunos que eles não devem usar os recursos de criação de layouts em tabelas. Felizmente a Adobe está fazendo o sua parte também, na versão CS3 do dreamweaver esses recursos ainda existem mas perderam destaque.

Minha intenção aqui é mostrar alguns recursos para tabelas de dados tabulares. Existem recursos poucos explorados nas tabelas. Esses recursos melhoram a acessibilidade e também melhoram a semântica do conteúdo.

Inicialmente falarei sobre as principais tags HTML das tabelas. Em outros artigos estarei falando especificamente de apresentação e acessibilidade.

TAGS HTML

As principais tags de tabelas são:

• table – (tabela) Determina um elemento de dados tabulares
• tr – (table row) Insere linhas em uma tabela.
• td – (table data) Insere células e colunas na tabela

Uma estrutura básica de uma tabela seria:

<table>
 <tr>
  <td>DADOS 1</td>
  <td>DADOS 2</td>
 </tr>
 <tr>
  <td>DADOS 3</td>
  <td>DADOS 4</td>
 </tr>
</table>

Com isso temos duas linhas com a tag <tr> e dentro dessas linhas temos duas células com a tag <td>. Essas duas células formarão colunas.

Para visualizarmos a estrutura da tabela iremos inserir o atributo border com o valor 1. Esse atributo e de apresentação e não deve ser usado. Como estamos somente conhecendo as tags HTML vamos usá-lo, mais a frente iremos retirá-lo.

Então a primeira linha do código ficaria assim:

<table border="1">

E a nossa tabela seria exibida assim:

Dica: É recomendado que todas as tags de dados <td> tenham conteúdo. Em último caso use o caractere especial de espaço ( ) se elas precisarem ficar vazias.

TAG CAPTION

A tag <caption> como o próprio nome já sugere é para inserir o título na tabela.

Vamos ao código:

<table border="1">
 <caption>Nome da tabela</caption>
 <tr>
  <td>DADOS 1</td>
  <td>DADOS 2</td>
 </tr>
 <tr>
  <td>DADOS 3</td>
  <td>DADOS 4</td>
 </tr>
</table>

Resultado:

Por padrão, o caption fica no topo da tabela mas você pode mudar a sua posição inserindo o atributo align com os valores: left, rigth, bottom e top. Você pode estar perguntando se isso não é apresentação. Também classifico como apresentação, mas infelizmente o CSS possui uma propriedade caption-side que nos meus testes só funcionou no nosso amigo Firefox. Como atributo align para o caption é valido no XHTML 1.1 não teremos problemas.

TAG TH

A tag <th> é usada para inserir uma legenda para colunas e linhas da tabela. Apesar da tag <th> ser inserida como uma célula e já ficar posicionada corretamente, devemos usar o atributo scope para reforçarmos a declaração de sua posição. O atributo scope recebe os valores col para cabeçalhos de coluna e row para cabeçalhos de linha.

<table border="1">
 <caption>Nome da tabela</caption>
  <tr>
  <th scope="col">COLUNA 1</th>
  <th scope="col">COLUNA 2</th>
 </tr>
 <tr>
  <td>DADOS 1</td>
  <td>DADOS 2</td>
 </tr>
 <tr>
  <td>DADOS 3</td>
  <td>DADOS 4</td>
 </tr>

</table>

Resultado:

O conteúdo as tags <th> por padrão são exibidos em negrito e centralizados.

TAGS THEAD TBODY e TFOOT

As tags <thead>, <tbody> e <tfoot>servem para otimizar a estrutura de uma tabela. Elas definem onde será exibido um determinado bloco de elementos e seu respectivo conteúdo:

• <thead> – topo da tabela
• <tfoot> – rodapé da tabela. Deve ser inserido antes da tag <tbody>
• <tbody> – todo o conteúdo da tabela

<table border="1">
 <caption>Nome da tabela</caption>
<thead>
  <tr>
  <th scope="col">COLUNA 1</th>
  <th scope="col">COLUNA 2</th>
 </tr>
</thead>
<tfoot>
  <tr>
  <th scope="col">RODAPÉ 1</th>
  <th scope="col">RODAPÉ 2</th>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td>DADOS 1</td>
  <td>DADOS 2</td>
 </tr>
 <tr>
  <td>DADOS 3</td>
  <td>DADOS 4</td>
 </tr>
</tbody>
</table>

OBS: Estarei usando os carateres especias acentuados sem codificá-los para melhorar a leitura do codigo no tutorial. É aconselhado o uso dos códigos HTML para caracteres especiais.

As tags <thead>, <tbody> e <tfoot> são ignoradas no Netscape 4.

Na impressão o conteúdo das tags <thead> e <tfoot> deveriam ser repetidos em todas as páginas que contenham dados de uma tabela. Infelizmente, testei esse recurso no IE6, IE7, Firefox 1.5, Ópera e Amaya da W3 e esse recurso só funcionou no Firefox. Você pode criar uma página de teste inserindo várias linhas dentro da tag <tbody> e usar o recurso de “Visulizar a Impressão” dos Browsers.

Mas não deixe de usar as tags de estrutura pois os dispositivos de acessibilidade a cada dia melhoram o seu suporte à essas estruturas semânticas.

ATRIBUTOS

ATRIBUTOS COLSPAN E ROWSPAN

Os atributos colspan e rowpan podem ser usados para mesclar células, mas com bom senso pois diminuem a acessibilidade de uma tabela por deixar o código um pouco confuso para dispositvos de acessibilidade.

<table border="1">
  <caption>Nome da tabela</caption>
  <tr>
    <td colspan="2">Linha 1 com 2 Colunas mescladas </td>
  </tr>
  <tr>
    <td rowspan="2">Linhas 2 e 3 mescladas na Coluna 1 </td>
    <td>Linha 2 Coluna 2 </td>
  </tr>
  <tr>
    <td>Linha 3 Coluna 2 </td>
  </tr>
  <tr>
    <td>Linha 4 Coluna 1 </td>
    <td>Linha 4 Coluna 2 </td>
  </tr>
</table>

Resultado:

ATRIBUTO SUMARY

O atributo sumary é muito importante para browsers não visuais. Ele deve oferecer ao usuário uma breve descrição do conteúdo.

<table sumary = "resumo do conteúdo da tabela">

TABELA COMPLETA

Segue abaixo a estrutura completa de uma tabela:

<table border="1" sumary="Descrição do conteúdo">
 <caption>Nome da tabela</caption>
<thead>
  <tr>
  <th scope="col">COLUNA 1</th>
  <th scope="col">COLUNA 2</th>
 </tr>
</thead>
<tfoot>
  <tr>
  <th scope="col">RODAPÉ 1</th>
  <th scope="col">RODAPÉ 2</th>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td>DADOS 1</td>
  <td>DADOS 2</td>
 </tr>
 <tr>
  <td>DADOS 3</td>
  <td>DADOS 4</td>
 </tr>
</tbody>
</table>

Bom pessoal, nos próximos artigos estarei falando da apresentação e acessibilidade em tabelas.

Artigos relacionados:

1. Tabelas Semânticamente Corretas (Parte 02)
2. Tabelas Semânticamente Corretas
3. Preview do CSS 3