Curso de HTML / Criar uma tabela com table, tr, th e td

Use uma tabela HTML para dados cujos valores estão relacionados por linhas e colunas. Um elemento table contém linhas (tr); cada linha tem células de cabeçalho (th) ou células de dados (td). Não use uma tabela apenas para posicionar partes de uma página.

A estrutura básica da tabela

Esta pequena tabela registra quantas frutas estão em estoque. A primeira linha nomeia as colunas; as linhas seguintes contêm os valores.

<table>

  <tr>

    <th>Fruta</th>

    <th>Estoque</th>

  </tr>

  <tr>

    <td>Maçãs</td>

    <td>12 unidades</td>

  </tr>

  <tr>

    <td>Peras</td>

    <td>8 unidades</td>

  </tr>

</table>

Os dados aparecem por linha e coluna da seguinte forma:

Cole o código no body de um arquivo HTML. Cada tr forma uma linha horizontal, e suas células aparecem da esquerda para a direita. O estilo de tabela padrão do navegador pode mostrar poucas ou nenhuma borda; adicione bordas com CSS apenas depois que a estrutura dos dados estiver correta. Ao planejar uma tabela, esboce primeiro suas colunas e linhas. Para adicionar outra fruta, adicione outra linha de dados com um nome de fruta e um valor de estoque.

Separar as linhas de cabeçalho e corpo

Use thead e tbody quando você quiser agrupar explicitamente as linhas de cabeçalho e de dados. Uma linha de resumo pode ser colocada em tfoot. Esses elementos organizam as linhas; eles não criam cores nem bordas por si mesmos. Você pode omiti-los em uma tabela pequena, embora o analisador HTML do navegador possa inserir um tbody na árvore do documento mesmo quando ele não foi escrito na fonte.

<table>

  <thead>

    <tr><th>Fruta</th><th>Estoque</th></tr>

  </thead>

  <tbody>

    <tr><td>Maçãs</td><td>12 unidades</td></tr>

    <tr><td>Peras</td><td>8 unidades</td></tr>

  </tbody>

</table>

Escolha células de cabeçalho e células de dados

Use th quando um valor identifica uma linha ou uma coluna; use td para os dados associados a esse cabeçalho. Não escolha th apenas para colocar o texto em negrito. Uma tabela pode ter tanto cabeçalhos de colunas quanto cabeçalhos de linhas. Inclua as unidades, seja ao lado de cada número, ou em um cabeçalho apropriado. Um valor sozinho, como « 12 », pode não indicar aos leitores se significa itens ou um preço. Compare a legenda, o escopo e as células mescladas usando as tabelas reais em Tabelas acessíveis: caption, scope e células mescladas .

Uma vez que os fundamentos estão claros, você pode adicionar caption para nomear a tabela, scope para esclarecer as relações de cabeçalho, e colspan ou rowspan quando uma célula realmente abrange várias posições. A referência da tabela em MDN descreve esses recursos.

Em um arquivo HTML real, envolva uma tabela ampla da seguinte maneira. O CSS overflow-x permite rolagem horizontal sem remover dados ou alterar o sentido da tabela.

<div class="table-scroll">
  <table>
    <!-- Insira aqui as linhas da tabela anterior. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

Resolver uma tabela desalinhada

Verifique se cada linha comum contém o número esperado de células. Números incompatíveis podem colocar os dados sob o cabeçalho errado. Se uma tabela larga for truncada em uma tela estreita, considere uma área de rolagem horizontal em vez de comprimir o conteúdo até torná-lo ilegível. Não insira espaços repetidos dentro das células para imitar colunas; o alinhamento e as bordas pertencem ao CSS, enquanto as relações de dados pertencem ao HTML.