Referencial de Atividades
Todas as atividades
Exibição Visual

Tabela

Organiza informações em linhas e colunas para comparação estruturada. Ideal para mostrar diferenças entre opções, características de itens e dados tabulares.

Análise tabela comparação linhas colunas table

Experimente

Comparativo: Répteis vs. Anfíbios

Característica Répteis Anfíbios
Pele Seca, coberta por escamas Úmida e permeável, sem escamas
Respiração Pulmonar durante toda a vida Guelras quando jovem; pulmão e pele quando adulto
Reprodução Ovos com casca, postos em terra Ovos sem casca, geralmente postos na água
Habitat Predominantemente terrestre Depende da água para se reproduzir

Código-fonte

PHP

Dados de exemplo

Cabeçalho e linhas são arrays separados — cada linha tem o mesmo número de células que o cabeçalho. A primeira célula de cada linha não é um dado, é o rótulo da linha (o que está sendo comparado).

1 <?php
2 $titulo = 'Comparativo: Cachorro vs. Gato';
3 $cabecalho = ['Característica', 'Cachorro', 'Gato'];
4 $linhas = [
5 ['Necessidade de exercício', 'Alta — passeios diários', 'Baixa — brincadeiras curtas em casa'],
6 ['Independência', 'Baixa — depende de rotina com o tutor', 'Alta — se vira bem sozinho por longos períodos'],
7 ['Expectativa de vida', '10 a 13 anos, em média', '12 a 18 anos, em média'],
8 ['Ambiente ideal', 'Casa com quintal ou acesso a área externa', 'Apartamento bem estruturado verticalmente'],
9 ];
10 ?>

Cabeçalho da demo

Só o título, centralizado — mesmo tratamento dos outros componentes de exibição do site.

1 <div class="tabela-card">
2 <div class="cabecalho">
3 <p class="titulo"><?= htmlspecialchars($titulo) ?></p>
4 </div>

Cabeçalho da tabela

"scope=col" em cada <th> — sem isso, um leitor de tela não consegue anunciar "coluna Cachorro" ao focar numa célula, só o texto solto da célula.

1 <table class="tabela">
2 <thead>
3 <tr>
4 <?php foreach ($cabecalho as $col): ?>
5 <th scope="col"><?= htmlspecialchars($col) ?></th>
6 <?php endforeach; ?>
7 </tr>
8 </thead>

Linhas de dados

A primeira célula de cada linha é um <th scope="row">, não um <td> — ela é o cabeçalho daquela linha (o que está sendo comparado), então precisa do mesmo tratamento semântico do cabeçalho de coluna. Estilizar em negrito sem trocar a tag engana o olho, mas não o leitor de tela.

1 <tbody>
2 <?php foreach ($linhas as $i => $linha): ?>
3 <tr class="<?= $i % 2 === 1 ? 'linha-alternada' : '' ?>">
4 <?php foreach ($linha as $j => $celula): ?>
5 <?php if ($j === 0): ?>
6 <th scope="row"><?= htmlspecialchars($celula) ?></th>
7 <?php else: ?>
8 <td><?= htmlspecialchars($celula) ?></td>
9 <?php endif; ?>
10 <?php endforeach; ?>
11 </tr>
12 <?php endforeach; ?>
13 </tbody>
14 </table>
15 </div>
CSS

Cartão e cabeçalho

Cabeçalho como caixa de título própria, mesmo tratamento dos outros componentes de exibição do site.

1 .tabela-card {
2 border: 1px solid #e2e8f0;
3 border-radius: 16px;
4 overflow: hidden;
5 font-family: inherit;
6 }
7 .cabecalho {
8 padding: 20px 24px;
9 text-align: center;
10 background: #f1f5f9;
11 border-bottom: 1px solid #cbd5e1;
12 }
13 .titulo {
14 margin: 0;
15 font-size: 18px;
16 font-weight: 700;
17 color: #0f172a;
18 }

Estrutura da tabela

Cabeçalho de coluna em versalete pequeno (uppercase, letra reduzida) — deliberadamente menor que o corpo da tabela, pra ficar claro que é rótulo, não dado. Aumentar esse texto pra combinar com o resto do site tiraria essa distinção.

1 .tabela {
2 width: 100%;
3 border-collapse: collapse;
4 font-size: 15px;
5 }
6 .tabela thead tr {
7 border-bottom: 1px solid #cbd5e1;
8 }
9 .tabela th[scope="col"] {
10 padding: 12px 16px;
11 text-align: left;
12 font-size: 12px;
13 font-weight: 600;
14 color: #64748b;
15 text-transform: uppercase;
16 letter-spacing: 0.03em;
17 }

Linhas e zebra striping

A divisória entre linhas é um cinza claro (#e2e8f0), não preto nem cinza escuro — uma linha pesada demais compete com o conteúdo da célula em vez de só separar. O mesmo raciocínio vale pro fundo alternado: um tom só um pouco diferente do branco já basta pro olho seguir a linha sem esforço.

1 .tabela tbody tr {
2 border-bottom: 1px solid #e2e8f0;
3 }
4 .tabela tbody tr.linha-alternada {
5 background: #f8fafc;
6 }
7 .tabela th[scope="row"] {
8 padding: 12px 16px;
9 text-align: left;
10 font-weight: 600;
11 color: #1e293b;
12 }
13 .tabela td {
14 padding: 12px 16px;
15 color: #475569;
16 }