Atributo HTML colspan
O atributo HTML colspan especifica em quantas colunas a célula da tabela deve se estender. Saiba em quais elementos o atributo colspan pode ser usado.
O atributo HTML colspan faz com que uma única célula de tabela se estenda por duas ou mais colunas. É o equivalente em marcação ao recurso "mesclar células" de uma planilha: em vez de ter uma célula por coluna em uma linha, você atribui um colspan a uma célula para que ela ocupe o espaço horizontal de várias. É assim que se constroem linhas de resumo, cabeçalhos agrupados e qualquer layout em que um conteúdo pertence a mais de uma coluna.
Esta página aborda os valores aceitos pelo colspan, quais elementos o suportam, como combiná-lo com rowspan para estender colunas e linhas ao mesmo tempo, considerações de acessibilidade para células de cabeçalho e o CSS moderno que substitui o antigo estilo border="1".
Quais elementos suportam colspan
Você pode usar colspan apenas nos dois elementos de célula de tabela:
<td>— uma célula de dados padrão.colspandefine quantas posições de coluna a célula de dados ocupa.<th>— uma célula de cabeçalho.colspandefine quantas colunas o cabeçalho rotula.
Não é válido em <table>, <tr>, <col>, ou qualquer outro elemento. Para controlar colunas inteiras a partir de um único lugar, use <col>/<colgroup> — mas o comportamento de extensão de células sempre pertence ao <td> ou <th>.
Regras de valor
O valor de colspan é um inteiro positivo (1, 2, 3, …):
colspan="1"é o padrão — uma célula normal que ocupa uma única coluna. Raramente é necessário escrevê-lo explicitamente.- Qualquer valor maior que
1faz a célula se estender por essa quantidade de colunas. A célula consome posições de coluna das demais células na mesma linha, portanto cadacolspanreduz quantas células irmãs aquela linha deve conter. - O padrão HTML limita o valor a 1000; valores maiores são truncados.
colspan="0"era uma ideia antiga do HTML4 que significava "estender-se por todas as colunas restantes". Não faz parte do padrão HTML atual e não é suportado de forma confiável pelos navegadores, portanto não o use — forneça um inteiro positivo explícito.
Se você definir um colspan maior do que o número de colunas disponíveis na linha, o navegador simplesmente se estende até a borda da tabela; ele não cria colunas extras.
Sintaxe
<td colspan="value"> ... </td>
<th colspan="value"> ... </th>Exemplo do atributo HTML colspan usado no elemento <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total: $250</td>
</tr>
</table>
</body>
</html>A última linha tem apenas um <td>, não dois, porque colspan="2" faz essa célula única preencher tanto a coluna "Month" quanto a coluna "Salary". Se você remover o colspan, essa linha ficaria sem uma célula e o layout da tabela seria quebrado.
Exemplo do atributo HTML colspan usado no elemento <th>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
<tr>
<td>February</td>
<td>23</td>
</tr>
</table>
</body>
</html>Combinando colspan com rowspan
colspan se estende por colunas (horizontalmente); seu equivalente rowspan se estende por linhas (verticalmente). Eles são quase sempre ensinados juntos porque tabelas reais precisam de ambos — por exemplo, um cabeçalho que rotula várias colunas acima de subcabeçalhos, ou uma célula de rótulo que abrange várias linhas na lateral.
Você pode colocar ambos os atributos na mesma célula para fazê-la se estender por um bloco retangular de colunas e linhas ao mesmo tempo. Assim como com colspan isolado, cada célula que outra célula "cobre" deve ser removida da marcação da linha em que teria aparecido — caso contrário, aquela linha termina com células demais.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Email</th>
</tr>
<tr>
<td>Anna</td>
<td>555-0101</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>Aqui rowspan="2" faz o cabeçalho "Name" se estender para a segunda linha de cabeçalho, enquanto colspan="2" permite que o cabeçalho "Contact" fique acima de "Phone" e "Email". Você pode ler mais sobre como construir essas estruturas na página HTML Tables.
Estilizando bordas de tabela com CSS
O atributo border="1" usado nos exemplos acima é a forma antiga de desenhar bordas em células. Está obsoleto no HTML moderno — use CSS em seu lugar. A propriedade principal é border-collapse: collapse, que mescla as bordas duplicadas das células em linhas compartilhadas únicas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #666;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
</table>
</body>
</html>Isso oferece controle total sobre a cor, largura e espaçamento da borda, algo que o atributo border não consegue fazer.
Acessibilidade para células de cabeçalho estendidas
Quando um <th> se estende por várias colunas, os leitores de tela precisam de ajuda para entender quais células de dados ele descreve. Adicione um dos seguintes:
- O atributo
scopeno cabeçalho —scope="colgroup"para um cabeçalho que abrange várias colunas, ouscope="col"para uma única coluna. Esta é a opção mais simples para tabelas diretas. - Para tabelas complexas, atribua um
ida cada cabeçalho e referencie esses ids nas células de dados relevantes com o atributoheaders(headers="h1 h2").
Por exemplo, um cabeçalho de grupo de colunas deve ser marcado como <th colspan="2" scope="colgroup">Contact</th> para que a tecnologia assistiva o associe a ambas as colunas que ele abrange.