Uma agenda em tabela

Neste capítulo você vai usar tabela para dados relacionados e preservar sua leitura na tela estreita.

Seu ponto de partida

Estude depois do capítulo 14. O exemplo deste capítulo é 15-tabelas, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Tabela é para dados em relação

Table organiza dados em linhas e colunas. Não use tabela para construir o layout da página. A agenda relaciona horário, atividade e sala fictícia. Caption dá nome ao conjunto.

Thead reúne o cabeçalho; tbody reúne os registros. Tr cria uma linha. Th identifica cabeçalhos; td guarda dados. Scope=“col” informa que o cabeçalho se relaciona à sua coluna.

Faça no seu exemplo

Confira programacao.html.

<table>
  <caption>Programação fictícia</caption>
  <thead><tr><th scope="col">Horário</th><th scope="col">Atividade</th><th scope="col">Sala</th></tr></thead>
  <tbody><tr><td>09:00</td><td>Primeiros passos</td><td>Oficina</td></tr></tbody>
</table>

Mude uma coisa e preveja

Troque somente a atividade da primeira linha.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A célula muda sem alterar os cabeçalhos.

Se não acontecer

Se toda a linha se tornar cabeçalho, confira se usou td nos dados, e não th por aparência.

Cada registro mantém as colunas

As linhas desta agenda usam três células. Acrescentar um registro exige manter a correspondência com o cabeçalho. Não use colspan e rowspan antes de precisar realmente mesclar dados.

Uma tabela simples costuma ensinar melhor que uma agenda visualmente elaborada. Deixe informações adicionais num parágrafo ou numa coluna clara.

Faça no seu exemplo

Acrescente uma linha dentro de tbody.

<tr><td>11:00</td><td>Revisão comentada</td><td>Oficina</td></tr>

Mude uma coisa e preveja

Acrescente somente essa linha completa.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A agenda ganha uma atividade com três dados alinhados.

Se não acontecer

Se aparecer fora da tabela, confira se a linha ficou antes de /tbody e dentro de table.

Rolagem fica na tabela

Uma tabela pode precisar de mais largura que o celular. O contêiner com overflow-x:auto permite rolagem localizada. Ele tem nome acessível e tabindex para receber foco e ser percorrido por teclado. A página inteira não deve transbordar.

Não corte colunas com overflow:hidden. Elas podem conter informação necessária. A instrução junto da tabela explica como acessar a largura restante.

Faça no seu exemplo

Confira o contêiner e a regra.

.tabela-rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid #a6b8c3; }

Mude uma coisa e preveja

Abra a tela estreita e focalize o contêiner com Tab.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A tabela pode rolar dentro da própria região; o restante da página cabe.

Se não acontecer

Se não chegar por teclado, confira tabindex e o nome da região. Não dependa exclusivamente de arrastar com mouse.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Acrescente um registro com três células.

2. Explique caption e scope.

3. Confira rolagem localizada por teclado.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. A linha pertence a tbody e mantém as três colunas.

2. Caption nomeia a tabela; scope relaciona o cabeçalho à coluna.

3. A região focalizável permite acessar colunas sem transbordamento geral.

Quando seguir

Você apresenta a agenda com estrutura e acesso ao conteúdo. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 15-tabelas, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> <a href="local.html">Local</a> <a href="inscricao.html">Inscrição</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section><section aria-labelledby="beneficios"><h2 id="beneficios">O que você encontra</h2><ul class="beneficios"><li>Explicações curtas</li><li>Exemplos para alterar</li><li>Tempo para conferir</li></ul><h2>Seu percurso de prática</h2><ol><li>Abra a página.</li><li>Mude uma coisa.</li><li>Confira o resultado.</li></ol></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/simulacao.js

const form = document.querySelector('#inscricao');
const button = document.querySelector('#simular');
const status = document.querySelector('#retorno');
button.disabled = false;
form.addEventListener('submit', event => {
  event.preventDefault();
  status.textContent = 'Simulação concluída. Nada foi enviado ou gravado.';
  status.focus();
});
form.addEventListener('reset', () => { status.textContent = ''; });