Passo 1 de 8
Abranger colunas com colspan
Use uma única célula para representar informações compartilhadas por várias colunas, sem criar células extras na linha.
Trilha de aprendizado · Nível 5 · Tutorial 3
Criar células que abrangem várias linhas ou colunas, preservando a grade da tabela e as associações de cabeçalhos que representam grupos de dados.
Abranger colunas com colspan
Use uma única célula para representar informações compartilhadas por várias colunas, sem criar células extras na linha. 3 min
Abranger linhas com rowspan
Use rowspan para ocupar várias linhas e omita as células das posições já cobertas. 3 min
Respeitar os limites dos grupos de linhas
Dimensione rowspan sem atravessar os limites de thead, tbody ou tfoot, preservando os grupos que representam os dados. 2 min
Conferir a grade com mesclagens combinadas
Mapeie as posições ocupadas por colspan e rowspan para encontrar sobreposições, lacunas e células extras. 4 min
Declarar grupos de colunas com colgroup
Declare grupos de colunas consecutivas e ajuste seus valores de span à sequência real de colunas da tabela. 3 min
Associar cabeçalhos a grupos de colunas
Use scope="colgroup" para associar um cabeçalho ao grupo de colunas declarado, mantendo os cabeçalhos individuais. 3 min
Associar cabeçalhos a grupos de linhas
Use scope="rowgroup" para nomear grupos de linhas e preserve os cabeçalhos individuais de cada linha. 3 min
Aplicação final: mesclar sem perder as relações
Complete uma tabela com grupos de linhas e colunas e revise separadamente a ocupação da grade e as associações dos cabeçalhos. 5 min
Passo 1 de 8
Use uma única célula para representar informações compartilhadas por várias colunas, sem criar células extras na linha.
Use colspan quando uma mesma informação se aplica a colunas consecutivas — não apenas para deixar uma célula mais larga.
O valor indica o total de colunas ocupadas, incluindo aquela em que a célula começa. Assim, colspan="2" ocupa duas colunas, não três.
Nesta programação, uma única oficina ocupa a manhã e a tarde:
<table>
<caption>Programação das oficinas</caption>
<thead>
<tr>
<th scope="col">Dia</th>
<th scope="col">Manhã</th>
<th scope="col">Tarde</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Segunda-feira</th>
<td colspan="2">Oficina de HTML</td>
</tr>
</tbody>
</table>Dica
Adicionar colspan não combina o conteúdo de células existentes. Você escreve a informação compartilhada em uma única célula.
Agora a tabela tem quatro colunas: Dia, 9h, 10h e 11h. A oficina ocupa os três horários.
<tr>
<th scope="row">Terça-feira</th>
<td colspan="___">Oficina de HTML</td>
</tr>Qual número deve substituir a lacuna em colspan?
colspan pode ser usado em th ou td: um cabeçalho continua sendo cabeçalho; um dado continua sendo dado.
Em uma tabela com Produto, Quantidade e Subtotal (R$), o rodapé pode ter o cabeçalho “Total” abrangendo as duas primeiras colunas e o valor na terceira:
<tr>
<th colspan="2" scope="row">Total</th>
<td>180,00</td>
</tr>Dica
Essa linha tem dois elementos de célula, mas ocupa três colunas: 2 + 1 = 3. Não coloque um td vazio para a segunda coluna: ela já pertence ao cabeçalho “Total”. A célula extra deslocaria o valor para a quarta coluna.
A programação agora tem cinco colunas: Dia, 9h, 10h, 11h e 12h. A oficina ocupa os três primeiros horários. Às 12h, há outra atividade.
A linha ainda está incompleta:
<tr>
<th scope="row">Quarta-feira</th>
<td colspan="3">Oficina de HTML</td>
</tr>Quantas células td sem mesclagem devem ser adicionadas depois da oficina, antes de fechar o tr?
Passo 2 de 8
Use rowspan para ocupar várias linhas e omita as células das posições já cobertas.
Use rowspan para definir quantas linhas uma célula abrange, incluindo a linha em que começa. rowspan="2" ocupa a linha inicial e mais uma, não duas linhas adicionais.
Nos exemplos, usaremos números inteiros positivos, como 2 e 3. A célula fica no tr de origem; nas linhas seguintes, omita as células das posições que ela já ocupa.
Neste trecho, as colunas são Sala, Horário e Atividade. A Sala A vale para as duas linhas.
<tbody>
<tr>
<td rowspan="2">Sala A</td>
<td>9h</td>
<td>Leitura</td>
</tr>
<tr>
<td>10h</td>
<td>Escrita</td>
</tr>
</tbody>Dica
rowspan pode ser aplicado em th ou td. Use th se a informação for um cabeçalho e td se for um dado. A extensão vertical não muda essa função.
Considere uma grade de três linhas e duas colunas. L indica linha; C indica coluna. Assim, L2C1 é a primeira coluna da segunda linha.
Relacione cada trecho ao mapa de posições ocupadas pela mesma célula. Cada caso é independente, sem outras mesclagens.
Toque em um item e depois no par correspondente.
Agora imagine as colunas na ordem Horário, Sala e Atividade. A célula Sala A começa na segunda coluna e abrange duas linhas. Na linha seguinte, você escreve apenas as células de Horário e Atividade: a posição da Sala já está ocupada.
Exemplo
Coluna 1 → nova célula: 10h
Coluna 2 → continuação da célula Sala A, criada antes
Coluna 3 → nova célula: Escrita
São três posições ocupadas, mas apenas dois elementos td nesse tr.
Dica
Não insira <td></td> como compensação. Mesmo vazio, esse elemento cria uma nova célula; ele não representa a continuação do rowspan.
As colunas são Horário, Sala e Atividade. Este é o primeiro tr do corpo da tabela:
<tr>
<td>9h</td>
<td rowspan="2">Sala A</td>
<td>Leitura</td>
</tr>A próxima atividade é Escrita, às 10h, na mesma Sala A. Escolha a marcação que mantém cada informação na coluna prevista.
Passo 3 de 8
Dimensione rowspan sem atravessar os limites de thead, tbody ou tfoot, preservando os grupos que representam os dados.
Uma célula com rowspan deve ficar inteiramente no grupo de linhas em que começa: seu thead, tbody ou tfoot.
A abertura de outro tbody também marca um limite. Mesmo que os dois pertençam ao corpo da mesma tabela, a mesclagem não pode continuar de um para o outro.
Atenção
Não una grupos de dados distintos apenas para acomodar um rowspan maior. Ajuste a extensão da célula à divisão que faz sentido para os dados.
Este trecho pertence a uma tabela com as colunas Destino e Item. Cada tbody reúne os itens de uma remessa distinta. A mesclagem de Recife está excessiva.
<tbody>
<tr>
<td rowspan="3">Recife</td>
<td>Caderno</td>
</tr>
<tr><td>Lápis</td></tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">Natal</td>
<td>Caneta</td>
</tr>
<tr><td>Borracha</td></tr>
</tbody>Qual alteração corrige a mesclagem de Recife e preserva a separação entre as remessas?
O limite não é necessariamente o total de linhas do grupo. Conte da linha em que a célula começa até a última linha desse mesmo grupo, incluindo a origem. Linhas anteriores à célula não entram na conta.
Exemplo
Um tbody tem quatro linhas, e a célula começa na terceira:
O maior valor possível é rowspan="2". Use uma extensão menor se a informação não valer para todas as linhas disponíveis.
Um thead tem quatro linhas. Uma célula começa na segunda linha desse grupo. Depois do thead, há um tbody com seis linhas.
Sem alterar os grupos, o maior valor permitido para essa célula é rowspan="___".
Passo 4 de 8
Mapeie as posições ocupadas por colspan e rowspan para encontrar sobreposições, lacunas e células extras.
Considere uma agenda com quatro colunas: C1 = Horário, C2 = Sala A, C3 = Sala B e C4 = Sala C.
A oficina conjunta ocupa as salas A e B nos horários de 9h e 10h. Com colspan="2" e rowspan="2", uma única célula ocupa um retângulo de 2 colunas × 2 linhas: quatro posições. Cada posição prevista deve pertencer a uma única célula.
<tbody>
<tr>
<th scope="row">9h</th>
<td colspan="2" rowspan="2">Oficina conjunta</td>
<td>Palestra</td>
</tr>
<tr>
<th scope="row">10h</th>
<td>Debate</td>
</tr>
</tbody>Exemplo
No segundo tr, há apenas duas células no código. Mesmo assim, as quatro posições estão ocupadas: duas pelas células dessa linha e duas pela mesclagem iniciada acima.
Na agenda anterior, alguém alterou apenas o segundo tr. A oficina continua ocupando C2 e C3 nas duas linhas.
<tr>
<th scope="row" colspan="2">10h</th>
<td>Debate</td>
</tr>Qual análise corresponde à ocupação da grade?
Contar th e td, ou apenas somar os colspan do tr atual, ignora as posições ocupadas por rowspan anteriores.
Exemplo
Partindo da agenda correta de quatro colunas:
<td>Debate</td>, a posição C4 da segunda linha ficará sem a célula prevista.<td></td> antes de Debate, a célula vazia ocupará C4 e Debate será deslocado para C5, criando uma coluna extra.Uma célula vazia também ocupa espaço na grade.
Outra agenda tem C1 = Horário, C2 = Sala A, C3 = Sala B, C4 = Sala C e C5 = Sala D.
A oficina conjunta ocupa as salas A, B e C nos dois horários. Na sala D, há Leitura às 14h e Quiz às 15h. O trecho abaixo não representa essa distribuição corretamente.
<tbody>
<tr>
<th scope="row">14h</th>
<td colspan="2" rowspan="2">Oficina conjunta</td>
<td>Leitura</td>
</tr>
<tr>
<th scope="row">15h</th>
<td></td>
<td>Quiz</td>
</tr>
</tbody>Reescreva o tbody com as correções necessárias, preservando todos os horários e atividades e mantendo cinco colunas. Depois, indique quem ocupa C1 a C5 em cada linha para justificar sua resposta.
Escreva pelo menos 50 caracteres (0/50).
Passo 5 de 8
Declare grupos de colunas consecutivas e ajuste seus valores de span à sequência real de colunas da tabela.
colgroup declara um grupo de colunas consecutivas. Seu atributo span indica quantas colunas pertencem ao grupo.
No exemplo, há um grupo de uma coluna para identificar o produto e outro de duas colunas para os dados de estoque. Ao contrário de colspan, span em colgroup não mescla células.
<table>
<caption>Estoque por produto</caption>
<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th scope="col">Produto</th>
<th scope="col">Atual</th>
<th scope="col">Mínimo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Caderno</th>
<td>30</td>
<td>10</td>
</tr>
</tbody>
</table>Dica
Coloque os elementos colgroup diretamente dentro de table, após caption, quando houver, e antes dos grupos de linhas (thead, tbody e tfoot). Na forma usada aqui, declare span e deixe o elemento sem conteúdo: <colgroup span="2"></colgroup>.
Organize estes blocos dentro de table. As reticências representam o conteúdo dos grupos de linhas, omitido para destacar a estrutura.
Agora imagine cinco colunas, nesta ordem:
Produto | Atual A | Mínimo A | Atual B | Mínimo B
Queremos separar a identificação, o estoque da Loja A e o estoque da Loja B. O primeiro colgroup começa na coluna 1; cada grupo seguinte começa logo após o anterior.
<!-- Coluna 1: identificação do produto -->
<colgroup span="1"></colgroup>
<!-- Colunas 2 e 3: estoque da Loja A -->
<colgroup span="2"></colgroup>
<!-- Colunas 4 e 5: estoque da Loja B -->
<colgroup span="2"></colgroup>Atenção
Se você retirar a primeira declaração, o primeiro grupo de duas colunas passará a incluir Produto e Atual A. Os comentários não escolhem as colunas: a correspondência depende da ordem dos elementos e dos valores de span.
Uma tabela tem seis colunas, nesta ordem:
Código | Produto | Janeiro | Fevereiro | Março | Total
Declare três grupos consecutivos: identificação, meses e total. O último já usa <colgroup span="1"></colgroup>. Complete os valores dos dois primeiros.
Inclua Código e Produto no primeiro grupo:<colgroup span="___"></colgroup>
Inclua Janeiro, Fevereiro e Março no segundo grupo:<colgroup span="___"></colgroup>
Passo 6 de 8
Use scope="colgroup" para associar um cabeçalho ao grupo de colunas declarado, mantendo os cabeçalhos individuais.
Considere um grupo de colunas já declarado para Loja e Depósito. O cabeçalho Estoque nomeia esse conjunto.
colspan e rowspan definem a extensão da célula na grade. Já scope indica a quais dados um cabeçalho se aplica.
<th colspan="2" scope="colgroup">Estoque</th>Dica
colspan="2" faz Estoque ocupar duas colunas; scope="colgroup" indica que ele se aplica ao grupo de colunas ao qual pertence. Mesclar o cabeçalho não declara automaticamente essa associação.
Loja e Depósito continuam com scope="col", pois cada um identifica sua própria coluna.
Associe cada intenção à marcação adequada no cabeçalho.
Toque em um item e depois no par correspondente.
A coluna Produto fica fora do grupo Estoque. O segundo colgroup corresponde exatamente às duas colunas abrangidas pelo cabeçalho de grupo.
<table>
<caption>Estoque por local</caption>
<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th rowspan="2" scope="col">Produto</th>
<th colspan="2" scope="colgroup">Estoque</th>
</tr>
<tr>
<th scope="col">Loja</th>
<th scope="col">Depósito</th>
</tr>
</thead>
<tbody>
<tr>
<td>Caderno</td>
<td>12</td>
<td>30</td>
</tr>
</tbody>
</table>Dica
Não basta encontrar span="2" e colspan="2": ambos precisam corresponder às mesmas colunas, aqui a segunda e a terceira.
O cabeçalho Estoque acrescenta o contexto do grupo; Loja e Depósito preservam a identificação de cada coluna.
Na tabela anterior, alguém trocou apenas as declarações dos grupos pelo trecho abaixo. As colunas continuam na ordem Produto, Loja, Depósito, e Estoque mantém colspan="2" scope="colgroup" sobre Loja e Depósito.
<colgroup span="2"></colgroup>
<colgroup span="1"></colgroup>Estoque deve representar somente o grupo formado por Loja e Depósito.
Passo 7 de 8
Use scope="rowgroup" para nomear grupos de linhas e preserve os cabeçalhos individuais de cada linha.
Em uma tabela de filiais por região, use um tbody por região e scope="rowgroup" no th que a identifica. Assim, o cabeçalho se aplica ao grupo de linhas que o contém.
As filiais continuam com scope="row": cada uma identifica sua própria linha.
<tbody>
<tr>
<th rowspan="2" scope="rowgroup">Norte</th>
<th scope="row">Centro</th>
<td>12</td>
</tr>
<tr>
<th scope="row">Lago</th>
<td>8</td>
</tr>
</tbody>Dica
Esse tbody contém somente filiais do Norte. Para incluir outra região, crie outro tbody com seu próprio cabeçalho de grupo. A divisão representa a organização dos dados, não apenas sua aparência.
O atributo rowspan="2", sozinho, declara explicitamente que Norte é o cabeçalho de um grupo de linhas.
As colunas são região, filial e unidades. Observe que há apenas um grupo de linhas.
<tbody>
<tr>
<th rowspan="2" scope="rowgroup">Norte</th>
<th scope="row">Centro</th><td>12</td>
</tr>
<tr>
<th scope="row">Lago</th><td>8</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">Sul</th>
<th scope="row">Parque</th><td>10</td>
</tr>
<tr>
<th scope="row">Porto</th><td>6</td>
</tr>
</tbody>Cada região deve ter seu próprio grupo estrutural de linhas e continuar como cabeçalho desse grupo com scope="rowgroup". Cada filial deve continuar identificando apenas sua linha. Qual alteração atende a esses requisitos?
Passo 8 de 8
Complete uma tabela com grupos de linhas e colunas e revise separadamente a ocupação da grade e as associações dos cabeçalhos.
Finalize uma tabela de vendas com quatro colunas: Região, Cidade, Jan e Fev.
O resultado deve atender a estes critérios:
tbody por região.Dica
Faça duas passagens: confira primeiro quais posições cada célula ocupa; depois, confira a quais linhas ou colunas cada cabeçalho se aplica. Uma grade correta não garante, sozinha, associações corretas.
Este rascunho ainda não representa a grade final. Ajuste as células e acrescente as declarações e os atributos necessários.
<table>
<caption>Vendas no 1º bimestre (unidades)</caption>
<thead>
<tr>
<th scope="col">Região</th>
<th scope="col">Cidade</th>
<th>1º bimestre</th>
</tr>
<tr>
<td></td><td></td>
<th scope="col">Jan</th>
<th scope="col">Fev</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nordeste</th><th scope="row">Natal</th>
<td>12</td><td>15</td>
</tr>
<tr>
<th>Nordeste</th><th scope="row">Recife</th>
<td>18</td><td>20</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Sul</th><th scope="row">Curitiba</th>
<td>10</td><td>14</td>
</tr>
<tr>
<th>Sul</th><th scope="row">Porto Alegre</th>
<td>16</td><td>19</td>
</tr>
</tbody>
</table>Reescreva o HTML para cumprir os critérios da tela anterior. Use colgroup com span, as mesclagens necessárias e scope de grupo. Remova as células que ficarem em posições já cobertas, sem perder dados.
Depois de enviar, compare sua resposta com a solução de referência.
Escreva pelo menos 100 caracteres (0/100).
Após a conclusão, alguém substituiu os três colgroup por um único <colgroup span="4"></colgroup>. O cabeçalho 1º bimestre continua com colspan="2" e scope="colgroup".
Qual ajuste recupera o grupo exclusivo de Jan e Fev, sem alterar a grade?
Resumo
Antes de considerar uma tabela concluída, confira estes quatro pontos:
Parabéns! Você concluiu: Mesclar células com colspan e rowspan
Você concluiu “Mesclar células com colspan e rowspan”. Use o checklist para revisar suas próximas tabelas com mesclagens.
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
