Como criar tabelas em HTML5 - dummies

O contêiner de marcação primária para tabelas em HTML é o elemento da tabela. Ou seja, você usa a tag

de abertura para denotar o início de uma tabela e você adiciona a tag

de fechamento para encerrá-la.

Além disso, os blocos de construção básicos para dados de tabela em HTML são os elementos da tabela ( ) e de dados de tabela ( ), quando uma tabela contém quantas linhas existem elementos (mais qualquer linha de cabeçalho ou rodapé) e tantas colunas como o número máximo de elementos em qualquer linha de tabela dada.

Entre essas tags de abertura e de fechamento, você pode encontrar os seguintes elementos nesta ordem muito interessante e prescrita (em outras palavras, obrigatória):

Zero ou um elementos para definir uma legenda para uma tabela (se houver um desses elementos, ou nenhuma legenda para a tabela se estiver ausente). Se for usado, um elemento deve seguir imediatamente após a marca de abertura

elementos de grupo de zero ou de uma coluna () para definir agrupamentos de colunas para a tabela (se houver um desses elementos ou nenhum grupo de colunas se o elemento estiver ausente). Ele deve aparecer após qualquer elemento, se houver, e antes de qualquer um dos seguintes elementos da tabela.

Zero ou um cabeçalho de tabela () elementos para definir a seção de título para uma tabela (se houver um desses elementos, ou nenhuma seção de cabeçalho de tabela se o elemento estiver ausente). Muitas vezes, uma primeira linha de cabeçalho de tabela abrange toda a largura da tabela para identificar a coisa toda, e a primeira linha de título é seguida por uma segunda linha de títulos individuais para cada coluna na tabela.

Zero ou mais elementos do corpo da tabela (

) para identificar o conteúdo real da tabela. Uma tabela pode ter vários elementos , então é incomum em HTML que uma tabela pode ter apenas uma cabeça, mas múltiplos corpos!

Zero ou um rodapé de tabela () para fornecer informações para a parte inferior de uma tabela. Os navegadores podem usar,

, e decidir o que rolar (o corpo da tabela, geralmente) eo que deixar sempre presente na tela.

O rodapé da tabela é um caso especial quando se trata de onde na seqüência de marcação da tabela pode aparecer. Ele sempre pode aparecer o último na seqüência (como faz nesta lista), mas também pode aparecer logo após qualquer um desses elementos presentes (nesta ordem):, e.

No entanto, apareceria antes dos elementos

e . Neste caso especial, também não pode aparecer no final da tabela. Não permitido!

Se não houver nenhum elemento

presente (que normalmente definisse o corpo da tabela em uma tabela com um cabeçalho de tabela definido e possivelmente também uma seção de rodapé), o elemento da linha da tabela ( ) define as linhas para os dados que a tabela realmente apresenta.Dentro de cada linha de tabela são tantos elementos da tabela (

) como existem células nessa linha.

Como a sintaxe da tabela HTML e a ordem de marcação podem ser complicadas e complicadas, é ainda mais útil do que o habitual executar todas as anotações da tabela ao serviço de validação de marcação W3C para garantir que esteja correto.

A estrutura de uma tabela HTML é mais fácil de entender se a representarmos usando somente a marcação básica de contêiner, com alguns comentários esperançosamente iluminantes, assim:

Estrutura e seqüência de marcação de tabela básica
 Tabela 6-1: Estrutura e Seqüência de Marcação HTML

 Elemento 
 Descrição 



 tabela 
 recipiente de tabela geral 


 legenda 
 texto da legenda da tabela 


 tbody 
 recipiente do corpo da tabela 


 tfoot 
 contentor de rodapé de mesa 



 Elemento 
 Descrição

A figura mostra como um navegador exibe esta tabela. (A entrada border = "1" foi adicionada ao elemento da tabela para desenhar um contorno ao redor da borda de cada célula da tabela, o que torna a tabela um pouco melhor.)