O documento que se segue é uma tradução do artigo: Venham as tabelas de Roger Johansson.
- Introdução
- Cabeçalhos de Tabela
- Legendas de Tabela
- Explicar a Tabela
- Abreviar Cabeçalhos
- Associar Cabeçalhos a Dados
- Unir Linhas e Colunas
- Colunas e Grupos de Colunas
- Grupos de Linhas
- Só para Tabelas de Dados
- As Vantagens
- O Que Eu Não Lhe Disse
Introdução
Uma das coisas que confunde as pessoas que são novatas no uso de arranjos (layout) baseados em CSS é o uso de tabelas. Já vi muitos casos onde as pessoas interpretaram evitar usar tabelas para arranjo
como não usar tabelas de todo
. É importante perceber que o uso de tabelas está certo desde que usadas correctamente.
Sim, faça o seu melhor para evitar usar tabelas para arranjos, mas para dados tabulares, tabelas é o que deve usar-se. Desejo falar de como é que devem ser usadas as tabelas em HTML e XHTML para além das linhas e células. Muito mais. Especialmente se desejar que essas tabelas sejam acessíveis.
Primeiro um pouco de informação de fundo. A expressão "evitar usar tabelas para arranjos" encontra-se na Introdução às tabelas na especificação do HTML 4.01:
As tabelas não deveriam ser utilizadas única e simplesmente como forma de dar uma apresentação ou "layout" aos documentos, dado que isso poderá apresentar problemas para os médias de representação não visual. Adicionalmente e aquando usadas com gráficos, estas tabelas poderão ter de ser desdobradas horizontalmente, de modo a que elas se possam visualizar, sempre que designadas num sistema com uma exibição mais ampla. Para minimizar esses problemas, os autores deveriam usar as folhas de estilo, com vista a controlar os aspectos relacionados com o "layout", em vez das tabelas.
Julgo que isto é suficientemente claro, embora a expressão usada seja deve e não tem que, se assim sendo há alguma flexibilidade na especificação.
Quando são usadas tabelas para marcar dados, elas não são uma mera grelha. As pessoas que vêm podem ter uma ideia da relação entre o cabeçalho e as células de dados olhando para o arranjo e para a apresentação visual da tabela. As pessoas cegas ou dificuldades de visão não o podem fazer. Para que uma tabela seja acessível a pessoas que usam um leitor de ecrã ou um agente utilizador não visual, é necessário dizer ao agente utilizador como é que a informação contida se relacciona.
Cabeçalhos de Tabela, <th>
Comecemos com uma tabela muito simples que tem uma só linha de cabeçalhos, cada um definindo dados numa coluna. Marcada da forma antiga, nós só colocamos linhas e células na tabela, sendo que a marcação seria algo como:
<table>
<tr>
<td>Empresa</td>
<td>Empregados</td>
<td>Fundada em</td>
</tr>
<tr>
<td>Uma Lda.</td>
<td>20</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ</td>
<td>1955</td>
<td>1999</td>
</tr>
</table>
Sem border ou estilização a tabela surge da seguinte forma no seu navegador actual:
| Empresa | Empregados | Fundada em |
| Uma Lda. | 20 | 1947 |
| XYZ | 1955 | 1999 |
Se estilizar a tabela com um pouco de CSS, pode tornar os cabeçalhos mais óbvios para os que usem um navegador gráfico:
| Empresa | Empregados | Fundada em |
| Uma Lda. | 20 | 1947 |
| XYZ | 1955 | 1999 |
Para uma pessoa com boa visão, é agora fácil e rápido fazer uma ligação entre as células de cabeçalho e as células de dados que os descrevem. Alguém que use um leitor de ecrã, por outro lado, iria ouvir algo semelhante a : empresa empregados fundada em Uma lda. 20 1947 XYZ 55 1999. Não é muito fácil extrair o significado.
O primeiro passo - e o mais fácil - para a frente de modo a tornar esta tabela mais acessível é marcar adequadamente os cabeçalhos. É muito fácil: usar o elemento <th> (table header/cabeçalho de tabela) em vez do <td> (table data/dado de tabela) nas células de cabeçalho
<table>
<tr>
<th>Empresa</th>
<th>Empregados</th>
<th>Fundada em</th>
</tr>
<tr>
<td>Uma Lda.</td>
<td>20</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ</td>
<td>55</td>
<td>1999</td>
</tr>
</table>
| Empresa | Empregados | Fundada em |
|---|---|---|
| Uma Lda. | 20 | 1947 |
| XYZ | 55 | 1999 |
No caso desta tabela simples, isto seria suficiente para que o leitor de ecrã fosse capaz de deixar o utilizador saber com que célula de dados está relacionado cada cabeçalho. O leitor de ecrã poderia dizer algo como: "Empresa: Uma lda. Empregados: 20 Fundada em: 1947, e assim sucessivamente para cada linha. Muito Melhor.
Legendas de tabela: <caption>
O elemento <caption> pode ser usado para oferecer uma breve descrição de uma tabela, tal como uma legenda de uma imagem. Por omissão a generalidade dos navegadores gráficos reproduzem o elemento <caption> centrado por cima da tabela. A propriedade CSS caption-side pode ser usada para o alterar, se necessário. A maior parte dos navegadores só irá mostrar a legenda por cima (top) ou por baixo (bottom) do conteúdo da tabela, alguns aceitam também valores de left (à esquerda) e right (à direita). Deixo-lhe como tarefa experimentar isto.
Quando usado o elemento <caption> deve ser a primeira coisa após a abertura do marcador <table>:
<table>
<caption>Tabela 1: Dados das empresas</caption>
<tr>
<th>Empresa</th>
<th>Empregados</th>
<th>Fundada em</th>
</tr>
<tr>
<td>Uma Lda.</td>
<td>20</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ</td>
<td>55</td>
<td>1999</td>
</tr>
</table>
| Empresa | Empregados | Fundada em |
|---|---|---|
| Uma Lda. | 20 | 1947 |
| XYZ | 55 | 1999 |
Claro que pode usar CSS para estilizar a legenda caso o deseje. Contudo tenha em atenção que pode ser complicado estilizar a legenda de forma consistente em todos os navegadores. Deixo isto como exercício para si.
Explicar a tabela: o atributo summary
Uma pessoa com visão pode facilmente decidir se deve ou não estudar uma tabela em detalhe. Uma vista rápida informa-lo-à de se a tabela é grande ou pequena e dá-lhe uma primeira aproximação sobre o seu conteúdo. Uma pessoa que use um leitor de ecrã não o pode fazer excepto se adicionarmos um atributo summary ao elemento tablez. Esta é a forma de oferecer-mos uma descrição mais detalhada da tabela do que aquilo que seria adequado com o elemento <caption.
O conteúdo do atributo summary não será reproduzido nos navegadores visuais, assim trate de ser tão explicito quanto possível de forma a que qualquer pessoa que possa ouvir compreenda sobre que assunto a tabela se debruça. Não se exceda, e só use este atributo quando necessário, isto é, para tabelas complexas onde um sumário tornará mais fácil a alguém que use um leitor de ecrã compreender o conteúdo da tabela.
<table
summary="Número de funcionários e ano da fundação de 2 empresas imaginárias
">
<caption>Tabela 1: Dados das empresas</caption>
<tr>
<th>Empresa</th>
<th>Empregados</th>
<th>Fundada em</th>
</tr>
<tr>
<td>Uma Lda.</td>
<td>20</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ</td>
<td>55</td>
<td>1999</td>
</tr>
</table>
Abreviar cabeçalhos: o atributo abbr
Quando um leitor de ecrã encontra uma tabela, pode anunciar o cabeçalho associado (ou cabeçalhos) antes de cada célula de dados. Se tiver um cabeçalho extenso, ouvi-los repetidamente pode ser um tédio. Usar o atributo abbr dá a possibilidade aos leitores de ecrã de usarem essas abreviaturas em vez do texto no próprio cabeçalho. Usar o atributo abbr é opcional e a maior parte do tempo os seus cabeçalhos serão (e talvez devam ser) breves de qualquer modo.
Se a tabela de exemplo for ligeiramente alterada de modo a que os cabeçalhos sejam um pouco maiores o atributo abbr pode ser usado da seguinte forma:
<table
summary="Número de funcionários e ano da fundação de 2 empresas imaginárias
">
<caption>Tabela 1: Dados das empresas</caption>
<tr>
<th abbr="Empresa">Razão social</th>
<th abbr="Empregados">Número de empregados Empregados</th>
<th abbr="Fundada">Fundada em</th>
</tr>
<tr>
<td>Uma Lda.</td>
<td>20</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ</td>
<td>55</td>
<td>1999</td>
</tr>
</table>
| Razão social | Número de empregados Empregados | Fundada em |
|---|---|---|
| Uma Lda. | 20 | 1947 |
| XYZ | 55 | 1999 |
Um leitor de ecrã poderia ler o cabeçalho completo na primeira linha de dados e nas seguintes utilizaria a forma abreviada.
Como provavelmente pode ser mais difícil uma tabela de dados encaixar-se num determinado arranjo, diria que seria mais comum necessitar do oposto: fazer cabeçalhos breves tanto quanto possível, mesmo abreviados, e usar o atributo title ou o elemento <abbr> para fornecer uma explicação mais extensa.
Associar cabeçalhos a dados: os atributos scope (âmbito), id e header (cabeçalho)
Algumas tabelas são mais complexas do que a do exemplo que tenho vindo a usar. Vou torná-la um pouco mais complexa retirando o cabeçalho "Empresa" e alterando as células de dados da primeira coluna em células de cabeçalhos:
<table
summary="Número de funcionários e ano da fundação de 2 empresas imaginárias
">
<caption>Tabela 1: Dados das empresas</caption>
<tr>
<td></td>
<th abbr="Empregados">Número de empregados</th>
<th abbr="Fundada">Fundada em</th>
</tr>
<tr>
<th>Uma Lda.</th>
<td>20</td>
<td>1947</td>
</tr>
<tr>
<th>XYZ</th>
<td>55</td>
<td>1999</td>
</tr>
</table>
| Número de Empregados | Fundada em | |
|---|---|---|
| Uma Lda. | 20 | 1947 |
| XYZ | 55 | 1999 |
Nesta tabela cada célula de dados tem dois cabeçalhos. O método mais simples, em termos de marcação para assegurar que um navegador não visual pode fazer sentido desta tabela é adicionar o atributo scope a todas as células de cabeçalho:
<table
summary="Número de funcionários e ano da fundação de 2 empresas imaginárias
">
<caption>Tabela 1: Dados das empresas</caption>
<tr>
<td></td>
<th scope="col">Empregados</th>
<th scope="col">Fundada em</th>
</tr>
<tr>
<th scope="row">Uma Lda.</th>
<td>20</td>
<td>1947</td>
</tr>
<th scope="row">XYZ</th>
<td>55</td>
<td>1999</td>
</tr>
</table>
O âmbito do atributo scope define se a célula cabeçalho dá informação sobre uma coluna ou de uma linha:
col: cabeçalho informativo para a coluna em que se encontrarow: cabeçalho informativo para a linha em que se encontra
Adicionar o atributo scope com o valor col aos cabeçalhos na primeira linha declara que se tratam de cabeçalhos para as células de dados por baixo deles. Do mesmo modo os cabeçalhos no início de cada linha com um atributo scope com o valor row torna esses cabeçalhos cabeçalhos das células de dados à sua direita.
O atributo scope pode tomar mais dois valores:
colgroup: a informação do cabeçalho para o resto do grupo de colunas que o contem.rowgroup: a informação do cabeçalho para o resto do grupo de linhas que o contem
Um grupo de colunas é definido pelo elemento <colgroup>. Os grupos de linhas são definidos por <thead>, <tfoot> e <tbody>. Voltarei a estes num instante.
O que sucede se desejar manter o cabeçalho "Empresa" e mesmo assim usar o cabeçalhos de linha com os nomes das empresas? Isso levará as células contendo os nomes das empresas a oferecer tanto o cabeçalho como os dados. Neste caso, <td> deve ser usado em conjunto com o atributo scope:
<table
summary="Número de funcionários e ano da fundação de 2 empresas imaginárias
">
<caption>Tabela 1: Dados das empresas</caption>
<tr>
<th scope="col">Empresa</th>
<th scope="col">Empregados</th>
<th scope="col">Fundada em</th>
</tr>
<tr>
<td scope="row">Uma Lda.</td>
<td>20</td>
<td>1947</td>
</tr>
<td scope="row">XYZ</td>
<td>55</td>
<td>1999</td>
</tr>
</table>
Neste caso os navegadores visuais não irão apresentar os nomes das companhias como cabeçalhos por omissão, e assim é necessário um pouco de CSS para corrigir esse facto. Para este exemplo pode usar-se o seguinte CSS:
td[scope] {
font-weight: bold;
}
Nota: esta regra usa um selector de atributo, o qual o Internet Explorer não suporta. É necessário contornar isto adicionando uma classe a qualquer célula de dados que seja também cabeçalho de linha.
Outra técnica para ligar as células de dados da tabela com os cabeçalhos apropriados envolve dar a cada cabeçalho uma id única. O atributo headers é então adicionado a cada célula de dados. Este atributo contém uma lista, separada por espaços, das id de todas as células de cabeçalhos que lhe sejam aplicados. Esta técnica é mais complicada e deve ser usada só quando as células de dados que necessitam de ser ligadas a mais do que duas células de cabeçalhos, e o atributo scope é insuficiente, como numa tabela muito fora do fulgar e complexa.
Para ilustrar isto alterei a tabela para mostrar o número de empregados de cada género que cada empresa tem:
<table class="extbl" summary="Número de funcionários e ano da fundação de 2 empresas imaginárias.">
<caption>Tabela 1: Dados das Empresas</caption>
<tr>
<td rowspan="2"></td>
<th id="empregados" colspan="2">Empregados</th>
<th id="fundada" rowspan="2">Fundada em</th>
</tr>
<tr>
<th id="homens">Homens</th>
<th id="mulheres">Mulheres</th>
</tr>
<tr>
<th id="uma">Uma Lda.</th>
<td headers="uma empregados homens">15</td>
<td headers="uma empregados mulheres">5</td>
<td headers="uma fundada">1947</td>
</tr>
<tr>
<th id="xyz">XYZ</th>
<td headers="xyz empregados homens">1200</td>
<td headers="xyz empregados mulheres">799</td>
<td headers="xyz fundada">1973</td>
</tr>
</table>
| Empregados | Fundada em | ||
|---|---|---|---|
| Homens | Mulheres | ||
| Uma Lda. | 15 | 5 | 1947 |
| XYZ | 1200 | 799 | 1973 |
Como pode ver este método torna-se rapidamente complicado, e assim sendo possível use o atributo scope em seu lugar.
Unir (span) linhas e colunas
Na antiguidade, nos dias de tabelas para arranjos, os atributos rowspan e colspan eram frequentemente usados para fazer com que as células da tabela abarcacem várias linhas e ou colunas de forma a posicionar correctamente em conjunto uma imagem correctamente recortada. Esses atributos ainda se encontram por aí - não há forma de especificar com CSS esta junção. Se se pensar um pouco sobre isto é muito lógico: junções de linhas e de colunas são parte da estrutura da tabela e não na sua apresentação.
Colunas e grupos de colunas: <col> e <colgroup>
O HTML oferece os elementos <colgroup> e <col> servem para agrupar colunas relacionadas numa tabela. Isto permite (em alguns navegadores) o uso de CSS para estelizar colunas de forma independente. Grupos de colunas podem ser usadas pelo atributo scope para especificar que uma célula contém informação de cabeçalho para o resto do grupo de colunas que a contenha.
É tudo o que vou dizer, aqui, sobre colunas e grupos de colunas. Para mais informação ler as ligações na secção "O que é que não lhe disse".
Grupos de linhas: <thead>, <tfoot> e <tbody>
As linhas da tabela podem ser agrupadas num cabeçalho da tabela (<thead>), um rodapé da tabela (<tfoot>) e uma ou mais secções de corpos de tabela (<tbody>). Cada grupo de linhas tem que conter uma ou mais linhas.
Se uma tabela possui uma secção de cabeçalho, esta tem que aparecer antes da secção de rodapé de tabela e da ou das secções de corpo da tabela. Uma secção de rodapé tem que aparecer antes da ou das secções de corpo. Se não for usada nenhuma secção de cabeçalho ou rodapé não é necessário usar um elemento <tbody, mas também não é proibido (se quizer pode usar). A estrutura da tabela que tenha grupos de linhas é algo como:
<table>
<thead>
<tr></tr>
… mais linhas para o cabeçalho da tabela
</thead>
<tfoot>
<tr></tr>
… mais linhas para o rodapé da tabela
</tfoot>
<tbody>
<tr></tr>
… mais linhas para o primeiro corpo da tabela
</tbody>
<tbody>
<tr></tr>
… mais linhas para o segundo corpo da tabela
</tbody>
… mais corpos de tabela se necessário
</table>
O agrupamento de linhas pode ser útil por várias razões:
- Torna fácil a estilização das secções de cabeçalho, rodapé e corpos de uma tabela independentemente uns dos outros, sem ter que adicionar classes a qualquer elemento.
- Quando se imprime tabelas extensas, em alguns navegadores (principalmente os baseados no Mozilla) repetem a informação presente nas secções de cabeçalho e rodapé a cada página impressa, tornando a leitura da tabela impressa mais fácil.
- A separação de cabeçalho e rodapé do corpo torna possível que os navegadores suportem o rolar do corpo da tabela com as restantes secções da tabela fixas.
Só para tabelas de dados
Tudo o que aqui é descrito está relacionado com o uso de tabelas HTML para estruturar e apresentar dados. Se usar tabelas para arranjo, nenhuma das técnicas descritas aqui deve ser usada. Não deve ser usado nenhum atributo summary nenhum cabeçalho, nenhuma legenda (<caption>), nada. Só arranjo de página baseado em tabelas, consistindo em nada mais do que os elementos <table>, <tr> e <td>. Caso contrário corre o risco de confundir os utilizadores dos agentes utilizadores não visuais ainda mais.
As vantagens
Pode parecer muito trabalho para criar tabelas de dados acessíveis. Para tabelas complexas tal é verdade. Por vezes ao ponto de ser quase impossível de o fazer à mão. Para tabelas simples, o uso de células de cabeçalho com o atributo scope é fácil e rápido.
É óbvio que pessoas que usem leitores de ecrã ou outras tecnologias de assistência obtêm vantagens de tabelas que tenham disponíveis capacidades de acessibilidade. Tentar extrair significado de uma tabela grande e complexa ouvindo-a pode ainda ser muito difícil e assim se for possível simplifique a tabela.
Menos óbvio é que os designers e os utilizadores de navegadores gráficos também beneficiam algo: uma tabela acessível tem pontos de ancoragem suficientes para aplicar CSS e uma boa estilização pode tornar uma tabela mais usável para todos.
O que eu não lhe disse
Há ainda muito mais a dizer sobre tabelas de dados do que aquilo que aqui mencionei. Por exemplo, não me referi a um atributo axis até aqui de todo, e também não descrevi em profundidade os elementos <colgroup> e <col>. Também não falei de formatação e estilização ou modelos de bordas. Também falta um exemplo de uma tabela realmente complexa.
Para aqueles que desejem informação mais detalhada eis algumas ligações para leitura adicional:
Mensagens
