Carregando...

Cabeçalhos de tabela HTML

Depois dos tamanhos, esta lição marca o significado dos rótulos: th, scope, caption. A apresentação fica no CSS.

Por que não basta um `td` em negrito

Ferramentas precisam de th real. Um td negrito pode parecer igual sem semântica de cabeçalho.

Resposta direta

Rotule com th. Use scope se ajudar e <caption> para o título. Valores ficam em td.

Cabeçalhos de coluna com caption

Linha superior com th scope="col" mais caption.

Column headers and caption

html

HTML Code

<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

Leitura do exemplo de colunas

caption dentro de table
th superiores com scope=col
quantidades em td

Cabeçalhos de linha para registos com nome

O nome da linha fica th scope="row", combinável com cabeçalhos de coluna.

Row headers with a header row

html

HTML Code

<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

Leitura do exemplo de linhas

topo scope=col
Ada/Lin scope=row
pontos em td

Mapa de scope

Consulta rápida dos valores.

📊 scope attribute values

Value	Typical use	Example cell
col	Header labels a column	Top “Qty” label
row	Header labels a row	Side “Ada” name
colgroup	Header for a group of columns	Advanced multi-header grids
rowgroup	Header for a group of rows	Advanced sectioned tables

Domine col e row primeiro neste curso.

Prática

Tabela de clube com 3 colunas
caption
th scope=col no topo
th scope=row nos nomes
volte temporariamente a td e compare

Erros fáceis

td negrito sem th
caption fora da table
esquecer scope em grelhas mistas
marcar tudo como th

Resumo

th marca cabeçalhos reais
scope liga coluna ou linha
caption titula a tabela
dados em td

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma