0Pricing
HTML Academy · Aula

colspan e rowspan para abranger células

Unir células entre colunas e linhas.

colspan e rowspan para abranger células é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que é a expansão de células?

Por padrão, cada célula da tabela ocupa uma linha e uma coluna. A expansão permite que uma célula se estenda por várias colunas ou linhas:

  • colspan — estende-se por várias colunas
  • rowspan — estende-se por várias linhas

colspan

O atributo colspan faz uma célula se estender por várias colunas:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

O atributo rowspan faz uma célula se estender por várias linhas:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan e rowspan juntos

Você pode combinar os dois atributos em uma única célula:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Como lidar com células expandidas

Quando uma célula se estende por várias colunas, omita essas colunas nas linhas abrangidas:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Padrões comuns de expansão

Exemplos reais de expansão em tabelas:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan para cabeçalhos de linhas mesclados

Use rowspan para criar rótulos mesclados de grupos de linhas:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — célula com largura total

Um colspan igual a 0 abrange todas as colunas restantes de um grupo de colunas (raramente usado):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Expansão e acessibilidade

Tabelas com expansão complexa precisam dos atributos scope e headers para os leitores de tela:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Depurando problemas de expansão

Erros comuns de expansão:

  • Excesso ou falta de células em uma linha após a expansão
  • rowspan se estendendo além do número de linhas
  • Expansões sobrepostas (duas células reivindicando a mesma posição)

Use o DevTools do navegador para inspecionar a estrutura da tabela se algo parecer errado.

CSS para células expandidas

Estilize células que se estendem por várias colunas ou linhas:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Impressão e expansão

As células expandidas são impressas corretamente nos navegadores modernos. No entanto:

  • Se as linhas de thead abrangerem colunas, elas se repetirão corretamente em cada página impressa
  • rowspan dentro de tbody não se repete entre quebras de página
  • Teste tabelas complexas na prévia de impressão antes de publicá-las

Verificação rápida

Você tem uma célula de tabela que deve abranger 3 colunas. Qual atributo deve usar?

Resumo: colspan e rowspan

Elementos essenciais da expansão de células:

  • colspan — a célula se estende por várias colunas
  • rowspan — a célula se estende por várias linhas
  • Leve em conta as células expandidas: omita as células abrangidas pela expansão
  • Adicione scope="colgroup" para garantir a acessibilidade de cabeçalhos expandidos
  • Use o DevTools para depurar problemas de layout

Perguntas Frequentes

A aula “colspan e rowspan para abranger células” é grátis?

Sim — o texto completo de “colspan e rowspan para abranger células” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “colspan e rowspan para abranger células”?

Unir células entre colunas e linhas. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “colspan e rowspan para abranger células”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. table, tr, td e th
  2. Estrutura thead, tbody e tfoot
  3. colspan e rowspan para abranger células
  4. Acessibilidade de tabelas: scope, summary e caption
← Voltar para HTML Academy