Para associar valores HTML a um cabeçalho que abrange várias linhas, defina um grupo de linhas e use scope="rowgroup". Para relações mais complexas, atribua IDs exclusivos aos cabeçalhos e liste-os no atributo headers de cada célula de dados. Este guia cria um exemplo local no TextEdit no Mac.

A tarefa é criar uma tabela HTML cujos valores mantenham seu contexto quando um rótulo abranger várias linhas. O W3C documenta cabeçalhos agrupados em seu tutorial sobre tabelas irregulares e associações explícitas em seu tutorial sobre cabeçalhos multinível.

De qual associação sua tabela precisa?

Comece anotando os rótulos necessários para entender um valor. No exemplo sintético abaixo, o valor 40 representa a largura, em milímetros, da variante grande do conjunto Alpha. Portanto, seu contexto completo é Alpha, Grande e Largura. Todas as dimensões são dados de exemplo ilustrativos.

Use este guia de decisão antes de editar:

Estrutura da tabela Associação a usar Requisito estrutural
Um cabeçalho rotula uma linha comum scope="row" Coloque o cabeçalho em uma célula th nessa linha
Um cabeçalho rotula uma coluna comum scope="col" Coloque o cabeçalho em uma célula th nessa coluna
Um cabeçalho rotula um grupo inteiro de linhas do corpo scope="rowgroup" Envolva essas linhas em seu próprio tbody
Um valor precisa de vários cabeçalhos, ou as relações mudam dentro da tabela IDs exclusivos para os cabeçalhos e uma lista headers Identifique explicitamente todos os cabeçalhos aplicáveis

Os valores de scope descrevem a relação; rowspan descreve quantas linhas a célula ocupa. Mesmo um cabeçalho alto precisa da associação adequada. O MDN documenta os dois atributos separadamente em sua referência do elemento de cabeçalho de tabela.

Para um grupo regular, o padrão do W3C combina um cabeçalho que abrange várias linhas com um tbody e um scope="rowgroup" separados. Uma tabela pode conter vários grupos do corpo. Mantenha as linhas de cabeçalho em thead; um cabeçalho que abranja linhas no rodapé pertence a tfoot. W3C: Tabelas com cabeçalhos irregulares.

Em tabelas complicadas, as associações explícitas permitem declarar diretamente todo o significado de um valor. O W3C recomenda essa abordagem para padrões que incluem cabeçalhos de coluna variáveis e células associadas a três ou mais cabeçalhos. O exemplo completo usa listas explícitas junto com atributos scope estruturais para que cada valor numérico indique seus três cabeçalhos. W3C: Tabelas com cabeçalhos multinível.

Criar o documento HTML no TextEdit

Use um novo arquivo local para o exercício. Se estiver adaptando um documento existente, primeiro guarde uma cópia separada para poder comparar os valores e a ordem originais com suas edições.

  1. Abra o TextEdit e escolha File > New.
  2. Escolha Format > Make Plain Text.
  3. Cole o documento completo abaixo, sem os marcadores de bloco de código Markdown.
  4. Escolha File > Save e dê a ele o nome table-headers.html.
  5. Se aparecer uma solicitação sobre a extensão, escolha Use .html.

Estas são as etapas documentadas pela Apple para criar um arquivo HTML no TextEdit. O exemplo não requer pacotes, scripts nem recursos externos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Para visualizar o resultado, abra o arquivo salvo no Safari. Você deverá ver quatro colunas, com Alpha e Beta ocupando duas linhas do corpo cada. Mantenha o arquivo aberto no TextEdit para verificar o código-fonte abaixo.

Ao reabrir o documento no TextEdit, use File > Open, selecione o arquivo, clique em Show Options e selecione Ignore rich text commands. Outra opção é ativar Display HTML files as HTML code instead of formatted text em TextEdit > Settings e, em seguida, Open and Save. A Apple documenta essas opções em suas instruções de edição de HTML.

Como o exemplo associa cada valor a seus cabeçalhos?

Leia o código-fonte de 40 como um pequeno mapa de associações. Sua lista headers contém tiles-alpha, tiles-alpha-large e tiles-width. Esses IDs identificam Alpha, Grande e Largura, respectivamente. O valor correspondente da altura, 60, mantém os dois primeiros IDs e substitui o terceiro por tiles-height.

Os IDs são identificadores escolhidos por quem escreve o código, não palavras-chave especiais do HTML. Cada item listado precisa identificar um elemento th na mesma tabela. Separe os itens com espaços e não repita itens em uma mesma lista. Esses requisitos constam dos atributos comuns de células de tabela do padrão HTML.

A lista declara o contexto completo em vez de esperar que o leitor o reconstrua a partir de outro cabeçalho. A técnica H43 do W3C descreve como colocar os IDs dos cabeçalhos aplicáveis no atributo headers de cada célula de dados.

Observe que a segunda linha de Alpha começa com Grande. Ela não contém uma célula extra para Alpha: a rowspan="2" da primeira linha já ocupa essa posição. Adicionar uma célula vazia ali alteraria a grade. O MDN explica que as células se encaixam nas posições disponíveis deixadas pelas células que abrangem várias linhas em suas notas de uso de células de cabeçalho.

Use o mesmo raciocínio para distinguir dois layouts superficialmente parecidos. Um rótulo à esquerda que abrange várias linhas do corpo pode ser um cabeçalho de grupo de linhas. Um rótulo de coluna que abrange duas linhas no topo ainda pode ser um cabeçalho de coluna com scope="col"; sua altura física não transforma sua relação em uma relação de grupo de linhas. MDN: Atributos de cabeçalho.

Verificar as associações antes de alterar a tabela

Para este exemplo, faça uma auditoria com três rótulos. Escolha um valor, identifique o conjunto, a variante e a dimensão a que ele deveria corresponder e, em seguida, compare esses rótulos com os IDs referenciados.

Valor Contexto esperado Valor esperado de headers
20 Alpha, Pequena, Largura tiles-alpha tiles-alpha-small tiles-width
60 Alpha, Grande, Altura tiles-alpha tiles-alpha-large tiles-height
25 Beta, Pequena, Largura tiles-beta tiles-beta-small tiles-width
65 Beta, Grande, Altura tiles-beta tiles-beta-large tiles-height

Repita a verificação para cada célula numérica. Confirme que cada ID referenciado existe, que cada referência aponta para o cabeçalho pretendido e que nenhum ID está duplicado em outra parte do documento. Essas verificações seguem o procedimento da técnica H43 do W3C. Uma tabela visualmente organizada é apenas parte da verificação; inspecione também as associações no código-fonte.

Ao adicionar uma terceira variante de Alpha, insira sua linha no tbody existente de Alpha, altere o span de Alpha para rowspan="3", atribua um ID exclusivo à nova variante e adicione a lista apropriada de três cabeçalhos a cada nova célula numérica. Preserve a ordem e os valores originais das linhas ao fazer essa alteração.

Ao remover uma variante, reduza o span de acordo. Se remover a primeira linha de um grupo, mova o cabeçalho do grupo para a primeira linha restante. Mantenha a célula que abrange várias linhas dentro de um único grupo de linhas: o modelo de tabela HTML não permite que uma célula se estenda por vários grupos de linhas. WHATWG: Modelo de tabela.

Se mais tarde um aplicativo gerar ou reordenar linhas, trate estas instruções como requisitos de atualização: mantenha cada grupo unido, coloque seu cabeçalho que abrange várias linhas na primeira linha, mantenha a contagem do span e atualize as referências que forem alteradas. Neste exemplo, mover Grande para antes de Pequena em Alpha também exigiria mover o cabeçalho Alpha para essa nova primeira linha.

E se o editor não conseguir preservar esses atributos?

O fato de um editor conseguir mesclar células não significa que ele preserve as associações usadas aqui. Antes de confiar em um documento editado ou exportado, inspecione o HTML para verificar os limites dos grupos, os valores de scope, os IDs e as listas de cabeçalhos pretendidos. O fluxo de trabalho para Mac descrito neste tutorial consiste em editar o código-fonte diretamente no TextEdit.

Se sua ferramenta de criação não conseguir manter a estrutura necessária, considere usar uma tabela separada e mais simples para cada conjunto, com colunas Variante, Largura e Altura. O W3C apresenta a divisão de tabelas complexas em tabelas menores como uma alternativa que pode facilitar tanto a leitura quanto a criação. Use essa opção somente se for aceitável alterar a estrutura original. W3C: Dividir tabelas multinível.

No exemplo concluído, escolha qualquer número e verifique se os três rótulos referenciados descrevem exatamente o que ele mede. Depois, repita essa mesma verificação sempre que inserir, excluir ou reordenar uma linha. Assim você terá uma maneira concreta de preservar o significado da tabela, além de sua aparência.

Fontes