Tabelas: a stack por área e nível

Quando a tabela é a estrutura certa

Quando o dado tem duas dimensões: cada linha é um registro, cada coluna é um campo, e o cruzamento das duas é que dá o sentido.

A sua página de stack é assim: ferramenta × área × nível.

<table>
  <caption>
    Ferramentas que uso, por área e por nível
  </caption>
  <thead>
    <tr>
      <th scope="col">Ferramenta</th>
      <th scope="col">Área</th>
      <th scope="col">Nível</th>
      <th scope="col">Desde</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estrutura</td>
      <td>Fluente</td>
      <td>2026</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Aparência</td>
      <td>Confortável</td>
      <td>2026</td>
    </tr>
    <tr>
      <td>Git</td>
      <td>Versionamento</td>
      <td>Familiarizada</td>
      <td>2026</td>
    </tr>
  </tbody>
</table>

Três níveis bastam, e são os que uma pessoa consegue defender numa conversa: familiarizado (já usei), confortável (uso sem consultar toda hora) e fluente (ensino alguém).

As tags, uma a uma

Tag	O que é
<table>	a tabela inteira
<caption>	o título dela; vem logo depois de <table>
<thead>	o bloco do cabeçalho
<tbody>	o bloco dos dados
<tr>	uma linha (table row)
<th>	célula de cabeçalho (table header)
<td>	célula de dado (table data)

scope: a diferença entre legível e ilegível

Um <th> sozinho diz "esta célula é um cabeçalho". O scope diz de quê:

<th scope="col">Nível</th>
<!-- este cabeçalho vale para a coluna inteira -->

<th scope="row">CSS</th>
<!-- este vale para a linha inteira -->

Por que isso é importante: quem enxerga a tabela lê a célula "Fluente" e sobe os olhos até "Nível" para saber o que aquilo significa. Quem usa leitor de tela não pode subir os olhos: o programa lê célula por célula.

Com scope, o leitor anuncia "Ferramenta: CSS, Nível: confortável". Sem ele, anuncia "CSS. Confortável.": e a pessoa precisa adivinhar de que coluna aquilo veio.

Células que ocupam mais de um espaço

Na página de carreira, a formação cabe numa tabela com um cabeçalho que vale por duas colunas:

<table>
  <caption>
    Formação
  </caption>
  <tr>
    <th scope="col">Período</th>
    <th scope="col" colspan="2">Curso e instituição</th>
  </tr>
  <tr>
    <td>2026</td>
    <td>HTML e CSS do zero</td>
    <td>Maiyu Academy</td>
  </tr>
  <tr>
    <td>2024 - 2025</td>
    <td>Técnico em Informática</td>
    <td>CETAM</td>
  </tr>
  <tr>
    <td>2026</td>
    <td colspan="2">Cursando: Lógica de programação, aos sábados</td>
  </tr>
</table>

colspan estende na horizontal, rowspan na vertical.

O que tabela não é

Tabela não é layout. Há vinte anos era comum montar a página inteira dentro de uma <table> invisível para posicionar as coisas. Hoje isso é defeito: um leitor de tela anuncia "tabela com 3 linhas e 2 colunas" para um menu, e a pessoa fica procurando o dado tabular que não existe.

Layout, colocar isto ao lado daquilo, é trabalho do CSS, e você vai aprender no curso seguinte. A grade de projetos do seu portfólio não é uma tabela, mesmo que fique parecida com uma na tela: cada projeto é um registro independente, não o cruzamento de uma linha com uma coluna.

No portfólio

Hoje nascem duas páginas, as duas com o esqueleto da aula 2 e o <nav> da aula 4 colado no topo:

stack.html, <title> "Stack · Seu Nome":

• <h1> com o assunto - "Ferramentas que uso no dia a dia";
• um parágrafo curto dizendo que a lista é do que você usa, não do que já viu;
• a <table> de ferramenta × área × nível × desde, com <caption>, <thead>, <tbody> e scope em todos os cabeçalhos.

carreira.html, <title> "Carreira · Seu Nome":

• <h1> "Trajetória até aqui";
• um <h2> "Formação" com a tabela de período × curso × instituição;
• um <h2> "Experiência" com a <ol> que você escreveu na aula 4, do mais recente ao mais antigo. Ela ganha estrutura melhor na aula 10.

Se você ainda não tem experiência profissional, a seção existe do mesmo jeito e diz isso: monitoria, trabalho voluntário e projeto de curso contam, e um portfólio que finge cinco anos de mercado se desmancha na primeira pergunta.

Exercícios

1. Monte a tabela da sua stack com <caption>, <thead>, <tbody> e scope em todos os cabeçalhos. No máximo oito linhas.
2. Refaça a mesma tabela com scope="row" na primeira coluna, deixando a ferramenta como cabeçalho da linha. Qual das duas formas lê melhor em voz alta?
3. Escreva a tabela de formação usando colspan numa linha em que o texto vale pelas duas colunas.
4. Leia a sua tabela de stack em voz alta, célula por célula, como um leitor de tela faria. Alguma célula fica sem sentido sem o cabeçalho?
5. Olhe a grade de projetos de um portfólio que você admira e escreva por que ela não é uma tabela.
6. Corte da sua stack toda ferramenta que você não usou nos últimos seis meses. Conte quantas sobraram.

Referências

• Tabelas em HTML - MDN - do básico ao cabeçalho com escopo
• Tabelas acessíveis - MDN - scope, caption e por que eles mudam tudo
• HTML Tables - W3Schools - exemplos com editor ao lado