Planeje uma tabela HTML com células mescladas desenhando primeiro a grade completa, atribuindo a cada célula mesclada um retângulo e escrevendo células apenas onde esses retângulos começam. Este guia explica um exemplo sintético que você pode criar no TextEdit e visualizar no Mac.

Defina a grade antes de escrever as células

A tarefa é criar uma tabela de cinco colunas com cabeçalhos de coluna agrupados, uma célula que se estende por linhas e colunas e outra célula que se estende por um número diferente de linhas. Os rótulos e o conteúdo abaixo são ilustrativos: representam blocos de nós neutros organizados por posição.

Tabelas HTML representam dados multidimensionais. Suas células devem cobrir a grade da tabela sem sobreposições. Se o resultado pretendido for simplesmente uma disposição de caixas sem relação entre si, o padrão HTML orienta os autores a usar ferramentas de layout, como CSS Grid. Aqui, cada bloco tem uma relação significativa com os cabeçalhos de linha e coluna, então uma tabela é adequada à tarefa. Padrão HTML: o elemento table.

Comece nomeando as menores colunas que existem em qualquer parte da tabela. Neste exemplo, elas são Slot, Node A, Node B, Node C e Note. O cabeçalho Nodes abrangerá três delas; ele não cria uma coluna adicional.

Os dois atributos de extensão contam toda a área ocupada pela célula, incluindo sua posição inicial. Assim, colspan="2" cobre duas colunas, enquanto rowspan="2" cobre duas linhas. Aplicar ambos cria um retângulo de duas por duas. Se omitida, a extensão assume o valor um. MDN: O elemento de célula de dados da tabela.

“Interligadas” descreve como esses retângulos se encaixam. Cada célula individual continua tendo uma área retangular; uma única célula não pode se curvar ao redor de outra. Pense em encaixar retângulos rotulados em papel quadriculado.

Crie um registro de posições para cada linha

Use uma tabela de planejamento expandida na qual os rótulos repetidos mostram a área ocupada por uma célula mesclada. A repetição neste registro não significa repetir essa célula no HTML. A seção de cabeçalho terá duas linhas; o corpo terá quatro.

Linha planejada Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5
Cabeçalho 1 Slot Nodes Nodes Nodes Note
Cabeçalho 2 Slot Node A Node B Node C Note
Corpo 1 Slot 1 Block P Block P Block Q Note X
Corpo 2 Slot 2 Block P Block P Block R Note X
Corpo 3 Slot 3 Block S Block T Block T Note X
Corpo 4 Slot 4 Block U Block U Block U Note Y

Agora registre a posição inicial e as dimensões de cada retângulo mesclado. As coordenadas são numeradas a partir de um e recomeçam em cada seção.

Célula Começa em Linhas abrangidas Colunas abrangidas
Cabeçalho Slot Linha 1 do cabeçalho, coluna 1 2 1
Cabeçalho Nodes Linha 1 do cabeçalho, coluna 2 1 3
Cabeçalho Note Linha 1 do cabeçalho, coluna 5 2 1
Block P Linha 1 do corpo, coluna 2 2 2
Note X Linha 1 do corpo, coluna 5 3 1
Block T Linha 3 do corpo, coluna 3 1 2
Block U Linha 4 do corpo, coluna 2 1 3

Este registro torna simples a segunda linha difícil do corpo: Block P já ocupa as colunas 2 e 3, e Note X já ocupa a coluna 5. Somente Slot 2 e Block R começam ali, então essa linha precisa de apenas dois elementos de célula.

Use este procedimento para cada linha:

  1. Marque as posições ocupadas por extensões iniciadas em linhas anteriores.
  2. Encontre a primeira coluna desocupada.
  3. Posicione a próxima célula e marque seu retângulo completo, incluindo as linhas futuras.
  4. Rejeite um retângulo se qualquer parte dele se sobrepuser a uma posição ocupada.
  5. Continue até que todas as cinco posições de coluna estejam contabilizadas.

Este procedimento é um recurso de planejamento derivado do modelo de tabelas do padrão. Os navegadores avançam além das posições iniciais ocupadas ao dispor as células, mas os autores ainda precisam evitar retângulos sobrepostos. Portanto, contar o número de elementos de célula em uma linha não basta. Padrão HTML: modelo de processamento.

Uma verificação útil por linha é: colunas ocupadas que vêm de linhas anteriores + colunas abrangidas por células que começam agora = cinco. A linha 2 do corpo tem três posições que vêm de linhas anteriores e duas posições novas. A linha 3 do corpo tem uma posição que vem de uma linha anterior e quatro posições novas. Verifique também as posições reais, além da soma: totais iguais, por si só, não detectam uma sobreposição combinada com uma lacuna.

Planeje os grupos de linhas e as relações entre cabeçalhos

Mantenha as duas linhas de cabeçalho dentro de um único thead e todas as quatro linhas do corpo dentro de um único tbody. Uma célula não pode se estender entre grupos de linhas separados. Por exemplo, Block P não pode começar em um tbody e terminar em outro. O padrão também especifica a ordem dos elementos filhos da tabela: um caption opcional, grupos de colunas, um thead opcional, linhas do corpo e um tfoot opcional. Padrão HTML: tabelas.

O exemplo define três grupos de colunas: uma coluna para Slot, três para Nodes e uma para Note. O cabeçalho Nodes usa scope="colgroup"; seus cabeçalhos subordinados usam scope="col". As orientações da W3C para cabeçalhos irregulares associam cabeçalhos agrupados a uma estrutura explícita de grupos de colunas. Tabelas com cabeçalhos irregulares.

Geometria e significado exigem decisões separadas. Block P abrange duas linhas de posições e duas colunas de nós, então os cabeçalhos pretendidos são Slot 1, Slot 2, Nodes, Node A e Node B. Note X pertence a três linhas de posições e à coluna Note.

Para essas células de dados mescladas, o exemplo torna explícitas as associações usando valores id nas células de cabeçalho e referências separadas por espaços no atributo headers de cada célula de dados. A W3C documenta essa abordagem para tabelas complexas cujas relações entre cabeçalhos precisam ser identificadas explicitamente. Tabelas com cabeçalhos multinível.

Não mescle valores independentes apenas porque o texto deles é igual. Neste documento sintético, Block P descreve deliberadamente um único bloco que se estende por quatro posições. Se cada posição contiver uma observação separada, mantenha essas células individuais para que a tabela preserve essa distinção.

Crie o arquivo HTML completo no Mac

O TextEdit pode criar o documento HTML local. Escolha File > New e, em seguida, Format > Make Plain Text. Cole o documento completo abaixo, escolha File > Save e nomeie-o span-plan.html. Se aparecer uma solicitação sobre a extensão, escolha Use .html. Estas são as etapas documentadas pela Apple para criar HTML. Trabalhe com documentos HTML no TextEdit no Mac.

Este é um documento completo e independente, com conteúdo de exemplo e estilos incluídos. Ele não exige scripts nem recursos externos.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Abra o arquivo salvo em um navegador no Mac. Compare-o com o registro: Block P deve se estender por Slot 1 e Slot 2, sob Node A e Node B; Note X deve se estender por Slot 1–3; Block T deve cobrir apenas Node B e Node C em Slot 3. Essas três verificações distinguem o padrão interligado pretendido de uma tabela que apenas tem um contorno retangular.

Se, ao reabrir o arquivo no TextEdit, o conteúdo aparecer formatado, escolha File > Open, selecione o arquivo, clique em Show Options e selecione Ignore rich text commands. Para edições posteriores, a Apple também documenta TextEdit > Settings > Open and Save, onde você pode ativar Display HTML files as HTML code instead of formatted text. Guia de HTML do TextEdit da Apple.

Diagnostique erros e atualize o planejamento sem perder a estrutura

Quando o resultado for diferente do planejamento, inspecione a primeira linha incorreta e os retângulos que se estendem até ela. Faça as verificações a seguir antes de alterar o espaçamento ou os estilos.

Sintoma O que inspecionar Correção para este exemplo
Coluna extra inesperada Células adicionadas em posições já ocupadas por uma extensão anterior A linha 2 do corpo contém apenas Slot 2 e Block R; remova eventuais células de preenchimento
Block R aparece sob o nó errado Largura e altura de Block P Confirme que Block P tem rowspan="2" e colspan="2"
Note X termina depois de Slot 2 Contagem de linhas Defina a extensão para três linhas
Os níveis do cabeçalho não se alinham A primeira linha do cabeçalho e a quantidade de células na segunda linha Slot e Note abrangem duas linhas; a segunda linha do cabeçalho contém apenas os três cabeçalhos dos nós
Uma célula mesclada tem cabeçalhos incompletos Referências headers Compare todas as linhas e colunas abrangidas com o registro

Uma célula vazia é apropriada quando uma posição representa um valor realmente vazio. Ela não é necessária em uma posição já ocupada por uma célula que se estende por várias posições. A documentação da MDN explica que as células comuns se encaixam nas posições disponíveis e que as extensões não devem se sobrepor. MDN: O elemento de célula de dados da tabela.

Para este exemplo fixo, use contagens positivas explícitas de linhas. O valor especial rowspan="0" significa as linhas restantes do grupo de linhas atual, então adicionar uma linha pode ampliar a cobertura dessa célula. Use esse valor apenas quando “até o fim deste grupo” expressar a relação pretendida. MDN: Comportamento da extensão de linhas.

Antes de inserir, excluir ou reordenar uma linha, atualize o registro. Se uma nova linha for inserida entre Slot 1 e Slot 2 e Block P tiver que incluí-la, aumente a extensão de Block P e adicione o novo cabeçalho de linha à lista headers. Reavalie Note X separadamente: a mesma inserção também pode mudar a cobertura pretendida. Reordenar linhas exige a mesma revisão, porque a extensão acompanha a posição no documento.

Se o conteúdo deixar de formar retângulos compreensíveis, simplifique sua apresentação. A W3C recomenda considerar tabelas menores quando vários níveis de cabeçalho tornam uma tabela difícil de entender. Tabelas com cabeçalhos multinível.

Mantenha o registro de posições ao lado do código-fonte enquanto revisa o documento. Para cada alteração, estabeleça os retângulos pretendidos, escreva células apenas em suas posições iniciais e confira os cabeçalhos associados. Assim, você terá um método repetível para preservar tanto a forma da tabela quanto as relações expressas pelo conteúdo.

Fontes