Criar tabelas simples com cabeçalhos e título

Use uma tabela quando as informações fizerem sentido pela relação entre linhas e colunas. Cada célula é uma informação nesse cruzamento. Em HTML, o elemento table representa esse tipo de dado.

Usar table para colocar um menu à esquerda e uma notícia à direita não é uma escolha adequada. Menu e notícia são regiões da página, não itens comparados por atributos comuns. A intenção é apenas posicionar conteúdo visualmente — isto é, montar o layout.

Vamos montar a estrutura inicial de uma tabela:

• <table> é o contêiner da tabela.
• <tr> representa uma linha dentro da tabela.
• <td> representa uma célula de dados dentro da linha.

No código abaixo, cada linha reúne um produto, sua cor e sua quantidade.

Nesta estrutura, as colunas se formam pela posição das células: a primeira célula de cada linha pertence à primeira coluna, a segunda à segunda coluna, e assim por diante. Não usamos uma tag de coluna.

Para manter a correspondência nesta tabela simples, todas as linhas devem ter a mesma quantidade de células e seguir a ordem produto → cor → quantidade.

Veja o que acontece se a linha da pasta ficar assim:

A tabela deve apresentar produto → cor → quantidade. Os dados da segunda linha são: Estojo, Preto e 5. Complete a lacuna para manter a quantidade e a ordem das células.

Use th para uma célula de cabeçalho e td para uma célula de dados.

• Cabeçalho de coluna: identifica o tipo de informação da coluna, como “Quantidade”.
• Cabeçalho de linha: identifica o item ao qual os demais dados da linha pertencem, como “Caderno”.

Nesta tabela, os nomes dos produtos funcionam como cabeçalhos de linha:

Essa linha tem três células: um th e dois td. O cabeçalho ocupa a posição do produto na mesma grade; ele não cria uma célula extra.

Não é preciso escolher um único tipo de célula para a linha inteira. Cada célula recebe o elemento que corresponde à sua função.

O elemento caption dá um título descritivo à tabela inteira. Esse título deve informar o assunto dos dados e, quando relevante, seu recorte: período, local ou grupo representado.

Use um único caption como primeiro elemento filho de table, antes das linhas. Ele fica diretamente dentro de table, nunca dentro de tr, th ou td.

O atributo scope, usado em th, indica explicitamente o alcance do cabeçalho:

• scope="col": identifica as células de uma coluna.
• scope="row": identifica as células de uma linha.

Escolha o valor pela relação do cabeçalho com os dados, não apenas pela posição visual da célula.

“Quantidade (unidades)” identifica o tipo de dado da coluna. “Lápis” identifica o produto ao qual pertencem os dados da linha.

Uma tabela de estoque tem as colunas “Produto” e “Quantidade (unidades)”. Cada linha reúne os dados de um produto. Complete as lacunas com row ou col, sem aspas.

Uma célula de dados pode receber contexto tanto de um cabeçalho de linha quanto de um cabeçalho de coluna. Juntos, eles ajudam a responder: de qual item estamos falando e que informação é essa?

Um centro cultural quer apresentar as vagas disponíveis em julho de 2026:

• Cerâmica: 12 vagas pela manhã e 8 à tarde.
• Fotografia: 10 vagas pela manhã e 6 à tarde.

A tabela deve permitir comparar as oficinas e os turnos.

Em outra versão da mesma tabela, a linha de Fotografia foi escrita assim. Revise a estrutura e a relação do cabeçalho com os dados.