Tutorial Avançado de HTML: Dominando Tabelas

Quer dizer que você acha que sabe como fazer uma tabela? Claro, você conhece as tags table, tr, td e th, você tem até os atributos rowspan e colspan no seu bolso. Você pode mesmo fazer uma mesinha pra café de madeira compensada, mas você não quer saber como construir uma daquelas mesas de jantar de madeira sólida e polida, com topo de vidro, dessas que suportam o peso de um elefante obeso?

Você quer? Que legal.

A vingança das colunas

Linhas em tabelas fazem as colunas parecerem meio estúpidas. Elas fazem todo o trabalho, com a tabela sendo construída linha por linha, deixando as colunas se sentindo meio rejeitadas.

Pra sorte das colunas mais ansiosas, as tags colgroup e col vieram para o resgate.

Essas tags permitem que você defina as colunas da tabela e deixe elas com o estilo que você quiser, o que é útil especialmente se você quer certas colunas alinhadas ou coloridas de uma outra forma. Sem essas tags, você ia ter que estilizar as células individualmente.

Aqui está um exemplo dessas tags em uso:



 

   
  
   






 
 

 
 
   Essa
   Aquela
   A outra   
    Huguinho   Zézinho   Luizinho

Os estilos da classe ‘alternada’ vão ser aplicadas à segunda coluna, ou à segunda célula em cada linha.

Você também pode usar o atributo span tanto em colgroup quanto em col, de um jeito parecido com colspan e rowspan.

Usando span na tag colgroup irá definir o número de colunas às quais aquele grupo irá pertencer. Por exemplo, agruparia as duas primeiras colunas. Quando span for usada em colgroup, você não deve usar tags col.

Para agrupar colunas, é mais sensato usar span na tag col. No exemplo acima, isso pode ser aplicado dessa forma:

span="2" class="alternada" />
...

Isso aplicaria “alternada” às duas últimas colunas.

Oh, mas sempre tem que ter uma pegadinha, não é? Aqui está: Os únicos estilos que você pode aplicar em colunas são bordas, bakgrounds, largura e visibilidade.

Internet Explorer parece se comportar bem melhor que os outros navegadores porque ele permite que você use praticamente qualquer propriedade CSS, como color, em colunas. Mas, como já era de se esperar, isso só acontece porque ele age de um jeito bem louco. Pra uma explicação mais detalhada dessa anomalia peculiar, deixe que Hixie explica.

Sumário e Legenda

Um jeito simples e rápido de melhorar a acessibilidade de suas tabelas é sempre colocar um sumário (summary) e uma legenda (caption).

Um sumário pode ser adicionado usando o atributo summary da tag table de abertura. Ele não será mostrado, mas pode ajudar numa representação não-visual de uma tabela.

A tag caption define uma legenda logo depois da tag de abertura table. Por padrão ela aparece em cima da tabela, mas pode ser colocada no topo, à direta, embaixo ou à esquerda com os valores top, right, bottom e left da propriedade CSS caption-side, embora o IE ignore essa propriedade.

summary="O ritual de acasalamento dos gafanhotos,
mostrando quantos usam proteção e quantos fumam um cigarro depois">

...

Cabeçalhos, rodapés e a busca pela tabela rolável

thead, tbody e tfoot te permitem separar a tabela em cabeçalho, corpo e rodapé. Isso é útil principalmente em tabelas muito grandes e quando elas são impressas. O cabeçalho e o rodapé, por exemplo, devem aparecer em todas as páginas.

Esses elementos devem ser definidos na ordem thead – tfoot – tbody. Olha como eles são:

...

Cabeçalho 1	Cabeçalho 2	Cabeçalho 3
Rodapé 1	Rodapé 2	Rodapé 3
Célula 1	Célula 2	Célula 3

Nota: Voltando as diferenças normais entre os navegadores, dessa vez o IE não tem nenhuma dica quando se trata de cabeçalhos e rodapés, e embora eles sejam renderizados na página, eles não vão aparecer no topo e no fim de cada página impressa.

Colocar barra de rolagem numa tabela é útil, mas não é tão simples graças a diferenças entre navegadores. Além disso, a maioria dos usuários não está acostumada com barras de rolagem em tabelas e pode achar que o conteúdo disponível é só o que está visível. No Imaputz você aprende a criar uma tabela rolável com cabeçalho fixo – mas o CSS que ele usa pra fazer isso não é tão fácil de entender.