Docs executáveis de HTML: Colspan e rowspan

Q: O que o colspan faz no HTML?

colspan faz um ou se estender por várias colunas: ocupa o lugar de três células na sua linha. Essa linha então precisa de duas células a menos que as outras.

Q: O que o rowspan faz no HTML?

rowspan faz uma célula se estender para baixo por várias linhas: preenche a sua linha e a de baixo. A próxima linha precisa deixar essa coluna de fora, porque a célula de cima já a ocupa.

Q: Uma célula pode usar colspan e rowspan juntos?

Sim. ocupa um bloco de duas colunas por duas linhas. Cada linha que ela atravessa precisa de duas células próprias a menos.

Q: Qual é o valor máximo de colspan?

Os navegadores limitam colspan a 1000 e rowspan a 65534. Em colspan, um valor 0 ou que não começa com um dígito é tratado como 1.

colspan: uma célula em várias colunas

colspan="n" deixa uma célula com a largura de n colunas. A linha em que ela está passa a ter n - 1 células a menos. Aqui o total ocupa as duas primeiras colunas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

A última linha tem duas células, mas a primeira conta como duas, então a linha continua somando três colunas como as outras.

rowspan: uma célula em várias linhas

rowspan="n" deixa uma célula com a altura de n linhas. As linhas abaixo dela deixam essa coluna de fora, porque a célula alta já a preenche:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

As linhas de Bob e Cy têm só um <td>: a coluna Team já está ocupada por "Design". Nada no HTML marca isso, então leia uma tabela com rowspan de cima para baixo e vá contando quais colunas ainda estão ocupadas.

colspan e rowspan juntos: uma grade de horários

Uma célula pode se estender nas duas direções. Uma grade de horários é o caso clássico, com algumas aulas durando dois horários e algumas acontecendo em dois dias:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Conte a linha das 10:00: o cabeçalho de horário, depois Mon está ocupada por HTML da linha de cima, depois Lab preenche Tue e Wed. Às 11:00, Mon está livre de novo e Lab ainda ocupa Tue e Wed, então a linha tem uma célula de dados.

Contando as células para a tabela não ficar torta

Toda linha precisa somar o mesmo número de colunas, contando o colspan de cada célula e as colunas ocupadas por células com rowspan vindas de cima. Quando uma linha tem uma célula a mais, o navegador cria uma nova coluna para ela e a tabela fica com a borda irregular:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

Na tabela errada, a segunda linha esqueceu que A ocupa a sua primeira coluna, então D cai numa terceira coluna que nenhuma outra linha tem. A correção é apagar uma célula. O mesmo erro com colspan é manter todas as células originais na linha que tem a célula larga.

Uma célula a menos é o problema oposto: a linha termina antes e deixa um buraco no final.

Cabeçalhos agrupados com colspan

Um cabeçalho pode se estender pelas colunas que ele nomeia, acima de uma linha de cabeçalhos mais específicos. Marque com scope="colgroup" para que os leitores de tela o apliquem a todas as colunas abaixo dele:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City" ocupa as duas linhas de cabeçalho com rowspan="2", e cada mês ocupa as suas duas colunas com colspan="2". Os elementos <colgroup> definem os grupos de colunas a que scope="colgroup" se refere. Um leitor de tela na célula 31 de Rome pode então dizer "Rome, July, High, 31". Para o resto da estrutura da tabela, veja tabela HTML.

Use spans só para estrutura real

Spans deixam a tabela mais difícil de ler com leitor de tela e mais difícil de ordenar, filtrar ou copiar para uma planilha. Use onde os dados realmente estão agrupados (um total, um cabeçalho acima de subcolunas, uma aula de duas horas). Se uma tabela precisa de muitos spans, duas tabelas mais simples costumam ser mais claras.

Erros comuns

Deixar as células ocupadas no lugar. Uma célula com colspan="2" substitui duas células; apague uma das originais.
Esquecer as linhas abaixo de um rowspan. Cada uma delas precisa de uma célula a menos.
Escrever colspan no <tr>. Só funciona em <td> e <th>.
Spans para layout visual, como uma faixa de banner numa tabela de layout de página. Use CSS grid para layout.
colspan="100%" para dizer "a largura toda". O navegador lê só os dígitos iniciais, então essa célula ocupa 100 colunas e adiciona colunas vazias à tabela. O valor é um número inteiro de colunas.

Perguntas frequentes

O que o colspan faz no HTML?

colspan faz um <td> ou <th> se estender por várias colunas: <td colspan="3"> ocupa o lugar de três células na sua linha. Essa linha então precisa de duas células a menos que as outras.

O que o rowspan faz no HTML?

rowspan faz uma célula se estender para baixo por várias linhas: <td rowspan="2"> preenche a sua linha e a de baixo. A próxima linha precisa deixar essa coluna de fora, porque a célula de cima já a ocupa.

Uma célula pode usar colspan e rowspan juntos?

Sim. <td colspan="2" rowspan="2"> ocupa um bloco de duas colunas por duas linhas. Cada linha que ela atravessa precisa de duas células próprias a menos.

Por que minha tabela tem uma célula a mais sobrando?

Uma linha tem mais células que as outras quando os spans são contados. Normalmente uma linha abaixo de um rowspan ainda lista uma célula para a coluna ocupada, ou uma linha com colspan manteve todas as células originais. Remova o <td> a mais.

Qual é o valor máximo de colspan?

Os navegadores limitam colspan a 1000 e rowspan a 65534. Em colspan, um valor 0 ou que não começa com um dígito é tratado como 1.

Conceitos relacionados