Criando tabelas acessíveis.
27.04.2011
Nosso assunto de hoje, dando sequencia ao tutorial xhtml, será sobre tabelas. Vamos falar um pouco sobre tabelas e como tornar nossa tabela acessível.
Muita gente tem horror a tabelas quando o assunto é tableless, dizem que tabela não deve mais ser utilizadas etc, mas poucos sabem que tabelas devem sim ser utilizadas, porém, com o seu real objetivo que é de mostrar, apenas, dados tabulares e não para criação de layouts.
Para se montar uma tabela em html – xhtml, devemos conhecer suas tags e para que cada uma delas servem.
Conheça as tags:
table
delimitador de uma tabela. é com ele que iremos indicar aonde começa e termina nossa tabela. é dentro dela que iremos adicionar título, cabeçalho, rodapé, células e linhas;caption
inserida imediatamente após a <table>, define um título para a tabela correspondente;thead
agrupa linhas de uma tabela definindo o cabeçalho. inserida sempre após a tagcaption
;tfoot
agrupa linhas de uma tabela definindo o rodapé. inserida sempre após a tagthead
;tbody
também agrupa linhas de uma tabela, porém, define seu conteúdo. inserida sempre após a tagtfoot
;tr
cria uma linha na tabela;td
cria uma coluna na tabela;th
define uma coluna de cabeçalho na tabela.
Vejamos como fica nossa tabela implementada com as tags acima:
<table>
<caption>Criando Tabelas Acessíveis</caption>
<thead>
<tr>
<th>Nome</th>
<th>Site</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Nome</td>
<td>Site</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Fulano 01</td>
<td>Site do Fulano 01</td>
</tr>
<tr>
<td>Fulano 02</td>
<td>Site do Fulano 02</td>
</tr>
<tr>
<td>Fulano 03</td>
<td>Site do Fulano 03</td>
</tr>
</tbody>
</table>
Dessa forma, teremos uma tabela acessível a todos, principalmente quando for utilizado um leitor de tela – jaws por exemplo – e sem sermos confundidos de que coluna vem o dado lido.
Não esqueça de deixar o seu comentário dizendo o que achou desse tutorial.