As seções da HTML Table possuem uma função muito importante na hora de organizar e manipular uma tabela. O cabeçalho e o rodapé localizados em suas respectivas seções facilitarão em muito a organização do conteúdo.

Seções

THEAD

Mesmo que a tabela renderize a célula TH como cabeçalho, se ela não estiver na seção THEAD, a atualização do TBODY terá que verificar se a linha manipulada não pertence ao cabeçalho. Quando o cabeçalho estiver localizado em sua seção, poderemos manipular o TBODY sem esta preocupação, até mesmo, apagar todos as linhas sem medo de ser feliz.

TBODY

É a seção onde devem estar apenas os dados da tabela. Se não for informada nenhuma seção todos as linhas (TR) da tabela farão parte do tbody.

TFOOT

Não existe uma tag interna da HTML Table específica para identificar uma célula de rodapé como a do cabeçalho (th).  Neste caso, a única forma de isolá-lo dos dados é posicionando-o em sua seção.

Estilo das seções HTML Table

É na criação das regras de estilo que as seções apresentam o seu poder de organização.

A criação de regras de estilo da tabela fica mais fáceis usando as seções, por deixá-las independentes umas das outras, eu posso por exemplo, criar uma regra de linhas ímpares e pares em que somente o corpo da tabela seja impactado.

Regra para estilo de linhas pares e ímpares:

table.tblPura  {
    background-color: beige;
}

table.tblPura tr:nth-of-type(odd) {
    background-color: lavender;
}

table.tblPura tr:first-of-type {
    background-color: gray;
    color: white;
}

table.tblPura tr:last-of-type {
    background-color: #444;
    color: white;
}

table.tblSecao {
    background-color: beige;
}

table.tblSecao tbody tr:nth-of-type(odd) {
    background-color: lavender;
}

table.tblSecao thead tr {
    background-color: gray;
    color: white;
}

table.tblSecao tfoot tr {
    background-color: #444;
    color: white;
}

Perceba como fica mais intuitiva a parametrização da tabela com seções, quanto que na sem seção, as regras são aplicadas as TRs, e depois é necessário isolar a primeira e a última como cabeçalho e rodapé.

A principal diferença entre elas é que sem utilizar a seção a ordem de definição das regras é de suma importância, pois as regras são renderizadas na ordem em que estão definidas. Utilizando as seções a ordem das definições não altera o resultado.

table.tblPura  {
    background-color: beige;
}

table.tblPura tr:first-of-type {
    background-color: gray;
    color: white;
}

table.tblPura tr:last-of-type {
    background-color: #444;
    color: white;
}

table.tblPura tr:nth-of-type(odd) {
    background-color: lavender;
}

table.tblSecao {
    background-color: beige;
}

table.tblSecao thead tr {
    background-color: gray;
    color: white;
}

table.tblSecao tfoot tr {
    background-color: #444;
    color: white;
}

table.tblSecao tbody tr:nth-of-type(odd) {
    background-color: lavender;
}

Notem que trocando a ordem das definições, somente a tabela sem seção não mantém o layout desejado.

Javascript

Para realizar atualizações na tabela via Javascript também é mais simples utilizando as seções. Por exemplo foi utilizado o código abaixo para limpar os registros do tbody das tabelas.

const limparLinhas = (identificacaoTabela) => {
   let tbl = document.querySelector(`${identificacaoTabela} tbody`);

   while(tbl.firstChild) {
      tbl.removeChild(tbl.firstChild);
   }
};

Foram adicionados 2 botões, 1 para cada tabela chamando a função acima:

Ao pressionar os botões e as linhas eliminadas teremos como resultado: tabela com seções ainda com o cabeçalho e o rodapé, e a tabela sem seções ficando somente com a borda.

Não foi adicionado código para atualizar o rodapé da tabela com seção, pois não era o objetivo do exemplo, entretanto bastaria atualizar o numerador com o length dos childNodes da tbody.

O estilo de programação e utilização dos objetos DOM do HTML é bem particular de cada um, contudo não quer dizer que não podemos aprender coisas novas que melhorem o nosso trabalho. Saiba mais sobre Código limpo na programação

Veja mais detalhes sobre as HTML Tables na W3 Schools.