Passo 1 de 7
Reconhecer quando scope não basta
Diferencie relações regulares de relações que precisam de associações explícitas, sem usar a mesclagem como único critério.
Trilha de aprendizado · Nível 5 · Tutorial 4
Representar explicitamente as relações entre células e múltiplos cabeçalhos quando scope não for suficiente, reconhecendo situações em que simplificar a tabela é a melhor escolha.
Reconhecer quando scope não basta
Diferencie relações regulares de relações que precisam de associações explícitas, sem usar a mesclagem como único critério. 2 min
Mapear o contexto de cada célula
Identifique os cabeçalhos que dão significado a cada valor antes de escrever as associações em HTML. 3 min
Declarar as associações com id e headers
Transforme o mapa de uma célula em referências explícitas aos seus cabeçalhos, usando identificadores exatos e listas completas. 4 min
Relacionar cabeçalhos a outros cabeçalhos
Use headers em th para contextualizar um cabeçalho, sem autorreferência e sem omitir associações diretas nas células de dados. 3 min
Conferir referências e significado
Revise a marcação para corrigir referências inválidas, contextos ausentes e associações com cabeçalhos errados. 3 min
Decidir quando simplificar a tabela
Escolha entre manter associações explícitas e dividir a tabela, preservando contextos e comparações essenciais. 2 min
Aplicar e revisar uma solução completa
Complete uma tabela, confira o significado das associações e justifique a escolha entre manter a estrutura e simplificá-la. 3 min
Passo 1 de 7
Diferencie relações regulares de relações que precisam de associações explícitas, sem usar a mesclagem como único critério.
A pergunta decisiva é: o alcance dos cabeçalhos corresponde a linhas, colunas ou grupos da tabela? Mesclagens e vários níveis de cabeçalho pedem análise, mas não tornam scope insuficiente automaticamente.
Exemplo
Em uma tabela de inscrições, “2026” abrange as colunas “Manhã” e “Noite”, que formam um grupo de colunas declarado no HTML. Cada curso identifica sua linha.
Há dois níveis de cabeçalho no topo, mas scope pode representar essas relações.
A tabela de inscrições precisa de associações explícitas só porque o cabeçalho “2026” está mesclado sobre duas colunas.
Exemplo
Em uma tabela de produção, as unidades ocupam as linhas e os meses ocupam as colunas. O cabeçalho “Estimativa” se aplica somente a:
Os outros valores dessas linhas e colunas são confirmados. As duas células não formam um grupo estrutural da tabela.
Nessa organização, scope não consegue selecionar apenas essas duas células. Associações explícitas permitem indicar exatamente quais cabeçalhos contextualizam cada célula, mesmo quando a relação não corresponde ao alcance de uma linha, coluna ou grupo.
Mantendo a organização descrita, qual relação precisa de associação explícita em vez de depender apenas de scope?
Passo 2 de 7
Identifique os cabeçalhos que dão significado a cada valor antes de escrever as associações em HTML.
Escolha uma célula e procure os cabeçalhos que explicam seu valor:
Inclua todos os níveis relevantes, não apenas o cabeçalho mais próximo.
Exemplo
Em uma tabela de inscrições, o valor 18 significa: “18 inscrições no curso de Design, na modalidade presencial, no turno da manhã”.
O mapa dessa célula inclui:
Cada cabeçalho acrescenta uma parte do significado.
Inscrições por curso, modalidade e turno
Nesta representação, a seta separa dois níveis de cabeçalho: modalidade → turno. Cada modalidade agrupa as colunas Manhã e Noite.
| Curso | Presencial → Manhã | Presencial → Noite | On-line → Manhã | On-line → Noite |
| --- | --- | --- | --- | --- |
| Design | 18 | 12 | 25 | 30 |
| Redes | 10 | 16 | 22 | 28 |
Relacione cada valor ao conjunto completo de cabeçalhos que o contextualiza.
Toque em um item e depois no par correspondente.
Transforme o mapa em uma descrição do dado.
“Há 12 inscrições em Design, à noite.”
A frase ainda deixa uma dúvida: em qual modalidade? Isso revela a falta do cabeçalho Presencial no mapa.
Uma descrição completa seria: “Há 12 inscrições em Design, na modalidade presencial, à noite”.
Dica
Um cabeçalho só entra no mapa se contextualizar aquela célula. Estar ao lado ou visualmente próximo não basta. Incluir o grupo errado também muda o significado do dado.
Observe este trecho da tabela de inscrições. A seta indica grupo → turno.
| Curso | Presencial → Noite | On-line → Noite |
| --- | --- | --- |
| Redes | 16 | 28 |
Para o valor 28, alguém mapeou apenas Redes + Noite.
Escreva uma descrição completa do dado e liste os cabeçalhos necessários. Explique por que um cabeçalho de grupo deve entrar no mapa e o outro deve ficar de fora.
Escreva pelo menos 30 caracteres (0/30).
Passo 3 de 7
Transforme o mapa de uma célula em referências explícitas aos seus cabeçalhos, usando identificadores exatos e listas completas.
Com o mapa pronto e a associação explícita escolhida, atribua um id a cada th que será referenciado, sem repetir identificadores no documento.
No td, o atributo headers reúne esses identificadores. Cada referência deve corresponder exatamente ao id de um th da mesma tabela.
Estes são fragmentos de uma mesma tabela. Cada cabeçalho permanece em sua posição na estrutura original.
<th id="ins-norte" scope="row">Norte</th>
<th id="ins-2025" colspan="2">2025</th>
<th id="ins-inscritos" scope="col">Inscritos</th>
<th id="ins-concluintes" scope="col">Concluintes</th>Dica
Em headers, separe os valores de id por espaços, dentro das mesmas aspas. Não use vírgulas nem o prefixo # usado nos links para trechos da página.
Outra linha da mesma tabela representa a região Sul. Uma de suas células já foi escrita assim:
<td headers="ins-sul ins-2025 ins-inscritos">90</td>
Os cabeçalhos de 2025 e Inscritos já têm os identificadores corretos. Complete apenas o valor de id do cabeçalho Sul, ainda não usado em outro elemento:
<th id="___" scope="row">Sul</th>
O mapa fornecido para o valor 120 é:
ins-norte;ins-2025;ins-inscritos.Liste os três diretamente no headers da célula. O cabeçalho Concluintes não entra, pois não faz parte do mapa desse dado.
<td headers="ins-norte ins-2025 ins-inscritos">120</td>Atenção
Mesmo que Norte tenha scope="row", mantenha ins-norte na lista. Ao declarar headers, inclua todos os cabeçalhos relevantes: não pressuponha que scope acrescentará os contextos omitidos.
O mapa do valor 60 é Sul + 2025 + Concluintes. Estes fragmentos mostram os cabeçalhos correspondentes, todos na mesma tabela da célula.
<th id="ins-sul" scope="row">Sul</th>
<th id="ins-2025" colspan="2">2025</th>
<th id="ins-concluintes" scope="col">Concluintes</th>Qual alternativa preenche corretamente a lacuna em <td headers="___">60</td>?
Passo 4 de 7
Use headers em th para contextualizar um cabeçalho, sem autorreferência e sem omitir associações diretas nas células de dados.
Um th pode usar id para ser referenciado e headers para declarar seu próprio contexto.
Neste recorte de uma tabela com associações explícitas, “Realizado” é contextualizado por “2025”. Os trechos destacam cabeçalhos de níveis diferentes na mesma tabela; a estrutura ao redor foi omitida.
<th id="ano-2025">2025</th>
<th id="realizado-2025" headers="ano-2025">Realizado</th>Atenção
Um th não pode incluir seu próprio id em headers. Por isso, o cabeçalho “Realizado” referencia ano-2025, mas não realizado-2025.
<th id="ano-2025">2025</th>
<th id="meta-2025" headers="___">Meta</th>“Meta” também precisa do contexto “2025”. Complete o valor de headers, sem aspas e sem autorreferência.
O valor 40 significa “Norte, 2025, Realizado”. Mesmo que “Realizado” já referencie “2025”, o td deve listar diretamente os três cabeçalhos.
Não dependa de que as associações entre th sejam encadeadas automaticamente para completar o contexto do dado.
<th id="norte">Norte</th>
<td headers="norte ano-2025 realizado-2025">40</td>Agora, o valor 55 significa “Sul, 2026, Realizado”. Os trechos abaixo pertencem à mesma tabela, mas as associações estão incompletas.
Reescreva apenas o th “Realizado” e o td: contextualize o cabeçalho pelo ano e faça o dado referenciar diretamente todos os cabeçalhos necessários, sem autorreferência.
<th id="ano-2026">2026</th>
<th id="realizado-2026">Realizado</th>
<th id="sul">Sul</th>
<td headers="sul realizado-2026">55</td>Mantenha os identificadores e os conteúdos das células.
Passo 5 de 7
Revise a marcação para corrigir referências inválidas, contextos ausentes e associações com cabeçalhos errados.
Para cada nome listado em headers, localize o destino no código e confira:
id existe e tem exatamente a mesma grafia, incluindo maiúsculas e minúsculas?th?th pertence à mesma tabela da célula que o referencia?Confira também se cada id aparece uma única vez no documento inteiro, não apenas nessa tabela.
Dica
A tabela pode parecer correta mesmo com referências quebradas ou trocadas. Confira a marcação e o significado, não apenas a posição visual dos cabeçalhos.
Associe cada situação encontrada na revisão ao diagnóstico correspondente.
Toque em um item e depois no par correspondente.
Depois de conferir os destinos, compare headers com os cabeçalhos previstos no mapa de contexto da célula:
A revisão só termina quando a lista inclui os contextos necessários, sem acrescentar contextos errados.
Exemplo
O identificador sul pode existir em um th da mesma tabela e ser único no documento. Mesmo assim, associá-lo a um valor da região Norte comunica o contexto errado. A existência da referência não garante sua adequação.
O mapa de contexto do valor 80 é: Norte → 2026 → Realizado (unidades). Revise essa célula. Considere que os identificadores mostrados são únicos no documento e que não existem outros destinos.
<table>
<caption>Produção por região</caption>
<thead>
<tr>
<th rowspan="2">Região</th>
<th id="ano2026" colspan="2">2026</th>
</tr>
<tr>
<th id="meta" headers="ano2026">Meta (unidades)</th>
<th id="realizado" headers="ano2026">Realizado (unidades)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="norte">Norte</th>
<td headers="norte ano2026 meta">100</td>
<td headers="Norte meta">80</td>
</tr>
</tbody>
</table>Reescreva apenas o td de 80, sem alterar os ids dos cabeçalhos. Explique qual referência é inválida, qual aponta para o cabeçalho errado e qual contexto foi omitido.
Escreva pelo menos 40 caracteres (0/40).
Passo 6 de 7
Escolha entre manter associações explícitas e dividir a tabela, preservando contextos e comparações essenciais.
Uma tabela com associações corretas ainda pode ser difícil de entender. Antes de mantê-la ou dividi-la, avalie:
Dica
Separe conjuntos de dados que possam ser compreendidos e consultados independentemente. O tamanho visual da tabela, sozinho, não justifica a divisão.
Um relatório de produção usa associações explícitas já revisadas. A tarefa principal é comparar quantidades planejadas e realizadas, em unidades, para cada produto e mês de 2025. Qual decisão favorece essa tarefa?
Preserve em cada tabela resultante o título, as unidades, o período e os cabeçalhos relevantes. Um valor não deve depender do título ou dos cabeçalhos que ficaram em outra tabela para ser entendido.
Exemplo
Em vez de chamar uma parte de “Tabela 2”, use um título como “Produção por produto — 2025 (unidades)”. Mantenha também os meses, os produtos e os rótulos “Planejado” e “Realizado” nos cabeçalhos.
Dica
Se as relações resultantes forem regulares e puderem ser expressas pelos escopos de linha, coluna ou grupo, scope pode ser suficiente. Dividir a tabela, por si só, não dispensa id e headers.
O relatório de produção passa a incluir consumo de energia por setor e mês, em kWh, também de 2025. A equipe consulta energia independentemente da produção; comparar produção planejada e realizada continua essencial.
O que você separaria e o que manteria junto? Em 3–4 frases, justifique considerando leitura e manutenção, indique os contextos de cada tabela e cite uma comparação que uma divisão inadequada prejudicaria.
Escreva pelo menos 60 caracteres (0/60).
Passo 7 de 7
Complete uma tabela, confira o significado das associações e justifique a escolha entre manter a estrutura e simplificá-la.
Um relatório de agosto de 2026 apresenta as vagas em oficinas da unidade Centro:
A prioridade é comparar as vagas noturnas entre as modalidades. Você vai completar uma versão com associações explícitas e revisar se a marcação comunica esses significados.
Dica
As mesclagens não tornam headers obrigatório. Nesta atividade, a tarefa é concluir corretamente a solução explícita escolhida para o relatório.
Considere que não há outros identificadores no documento.
<table>
<caption>Vagas em oficinas — agosto de 2026</caption>
<thead>
<tr>
<th rowspan="2">Unidade</th>
<th id="of-pres" colspan="2">Presencial</th>
<th id="of-online">Online</th>
</tr>
<tr>
<th id="of-manha" headers="of-pres">Manhã</th>
<th id="of-noite-pres" headers="of-pres">Noite</th>
<th>Noite</th>
</tr>
</thead>
<tbody>
<tr>
<th id="of-centro">Centro</th>
<td headers="of-centro of-pres of-manha">18</td>
<td headers="of-centro of-online of-noite-pres">12</td>
<td>20</td>
</tr>
</tbody>
</table>id único e headers ao th Noite da modalidade Online.Escreva apenas essas três células e uma frase que explique o significado completo de 20. Antes de enviar, confira cada referência na tabela.
Escreva pelo menos 60 caracteres (0/60).
A comparação entre as 12 vagas presenciais e as 20 vagas online à noite é a principal tarefa do relatório. Qual proposta atende melhor a essa prioridade?
Resumo
Use esta revisão final antes de considerar as associações concluídas.
Parabéns! Você concluiu: Associar cabeçalhos complexos com id e headers
Você praticou o processo completo: analisar as relações, mapear contextos, declarar associações, revisar o significado e decidir quando simplificar.
Você concluiu este nível!
Agora você vai iniciar: Formulários e entrada de dados
Criar campos de texto com rótulos acessíveisAo concluir, você poderá criar campos de uma ou várias linhas e associar rótulos visíveis que identifiquem corretamente cada controle.Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks