Redescobrindo tabelas HTML

Com base em algumas das minhas práticas recentes e após comunicar com alguns leitores sobre a utilização de tabelas HTML, decidi escrever este artigo. Em geral, notei que eles têm uma aversão pré-concebida ao uso de tabelas devido a informações enganosas. Na verdade muitas pessoas dirão “Vejo que tabelas nunca devem ser usadas”, mas isso é absolutamente errado! Esta sugestão se aplica apenas ao uso de tabelas HTML para definir o layout de uma página da web, mas as tabelas são perfeitas para organizar convenientemente linhas e colunas de informações de dados e, se você precisar exibir dados tabulares em uma página, deverá usá-las! por que não? Porém, neste caso, algumas pessoas ignoram a existência de certas tags HTML para tabelas e não sabem como utilizá-las corretamente.

HTML possui 10 tags relacionadas a tabelas. Abaixo segue uma lista com uma introdução, mas primeiro o documento deve estar devidamente definido em HTML 4.01/XHTML 1 ou HTML 5:

• <caption> define o título da tabela (4, 5)
• <col> define atributos para colunas da tabela (4, 5)
• <colgroup> define o agrupamento das colunas da tabela (4, 5)
• <tabela> define tabela(4, 5)
• <tbody> define o corpo da tabela (4, 5)
• <td> define uma célula (4, 5)
• <tfoot> define a nota de rodapé (parte inferior) da tabela (4, 5)
• <th> define o cabeçalho da tabela (4, 5)
• <thead> define o cabeçalho da tabela (4, 5)
• <tr> define as linhas da tabela (4, 5)

Uma estrutura básica de tabela é a seguinte:

Ele contém um título, cabeçalho, corpo e rodapé. A ordem correta dos elementos HTML é:

1. <tabela>
2. <legenda>
3. <thead>
4. <pé>
5. <corpo>

Você também pode usar <col> e <colgroup> para definir colunas de tabela ou colunas de grupo:

1. <tabela>
2. <legenda>
3. <colgrupo>
4. <col>
5. <thead>
6. <pé>
7. <corpo>