Organizar grupos de linhas com thead, tbody e tfoot

Na tabela que você já conhece, podemos envolver as linhas em grupos:

• thead reúne a linha ou as linhas de cabeçalho da tabela.
• tbody reúne as linhas do corpo, com os registros apresentados.

thead não substitui th: o primeiro agrupa linhas; o segundo identifica uma célula de cabeçalho.

Os grupos ficam diretamente dentro de table e contêm elementos tr. As células th e td continuam dentro de cada tr.

No exemplo abaixo, “Produto” e “Quantidade” formam o cabeçalho da tabela.

“Caderno” e “Caneta” identificam suas respectivas linhas. Por isso, permanecem como th com scope="row", mesmo dentro de tbody. Agrupar as linhas não muda a função dessas células.

Observe onde cada grupo abre e fecha: as células continuam dentro dos elementos tr.

A e B marcam lacunas, não tags válidas para esses grupos. Substitua cada letra pelo nome do elemento, tanto na abertura quanto no fechamento. Preserve as linhas, as células e seus atributos.

O <tfoot> reúne linhas que resumem os dados da tabela, como um total relacionado a uma coluna.

Uma linha pertence a esse grupo pela sua função de resumo, não simplesmente por aparecer no final. O último registro comum continua no <tbody>.

Quando os três grupos estão presentes, a ordem dentro de <table> é <thead> → <tbody> → <tfoot>.

A tabela pode ter no máximo um <tfoot>, contendo uma ou mais linhas <tr>. Ele fica depois do fechamento de <tbody>, no mesmo nível, e não dentro dele.

A linha mantém duas células: o rótulo Total na primeira coluna e a quantidade 5 na segunda.

Uma tabela pode ter vários tbody para representar conjuntos distintos de linhas relacionadas. Categorias ou períodos já identificados nos dados podem justificar essa divisão.

No exemplo, cada categoria ocupa um tbody. Os dois grupos são filhos de table, ficam consecutivos e no mesmo nível — nunca um dentro do outro. Um único thead atende aos dois, pois eles compartilham as mesmas colunas.

Esta tabela reúne atividades de janeiro e fevereiro em um único tbody. Agora, você vai separar esses dois conjuntos.

Não é obrigatório incluir thead e tfoot em toda tabela. Neste exemplo, os dias são cabeçalhos de linha: os th permanecem no tbody, mesmo sem thead. Como não há conjuntos distintos nem resumo, um único tbody basta.

Os grupos expressam a organização dos dados, mas não garantem mudanças visuais. Não divida o corpo apenas para tentar obter cores ou bordas: a separação precisa representar conjuntos relacionados de linhas.

Esta tabela reúne inscrições em oficinas da manhã e da tarde. Organize os registros por turno, mantendo o cabeçalho compartilhado e o resumo final. O total de 40 já está pronto: não é necessário calcular nada.