Estrutura da tabela em documentos HTML

Como adicionar uma tabela no documento HTML?

Para adicionar uma tabela em um documento HTML, utilizamos o elemento <table>. Dentro desta tag, podemos definir as linhas da tabela com o elemento <tr> e as células com os elementos <th> para cabeçalhos e <td> para dados.

Comece criando a tabela:

<table>
</table>

Agora, adicione um cabeçalho à tabela utilizando o elemento <th> dentro de uma linha <tr>.

<table>
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
</table>

Por fim, para adicionar linhas de dados à tabela, utilizamos o elemento <td> dentro de linhas <tr>.

<table>
  <!-- 1ª linha -->
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
  <!-- 2ª linha -->
  <tr>
    <td>Comercial Araújo</td>
    <td>João Silva</td>
    <td>Brasil</td>
  </tr>
  <!-- 3ª linha -->
  <tr>
    <td>Mercado Central</td>
    <td>Maria Souza</td>
    <td>Brasil</td>
  </tr>
</table>

Como transpor uma tabela em HTML?

Para transpor uma tabela, ou seja, trocar linhas por colunas, podemos reorganizar as tags <th> e <td>.

<table>
  <!-- 1ª linha -->
  <tr>
    <th>Empresa</th>
    <td>Comercial Araújo</td>
    <td>Mercado Central</td>
  </tr>
  <!-- 2ª linha -->
  <tr>
    <th>Contato</th>
    <td>João Silva</td>
    <td>Maria Souza</td>
  </tr>
  <!-- 3ª linha -->
  <tr>
    <th>País</th>
    <td>Brasil</td>
    <td>Brasil</td>
  </tr>
</table>

Tags envolvidas na construção de tabelas

As tags HTML utilizadas na construção de tabelas são essenciais para definir a estrutura e o estilo das tabelas.

Os elementos <thead>, <tbody> e <tfoot> são melhores utilizadas na intenção de criar estilos diferentes para a tabela. Veja mais a seguir no próximo capítulo sobre estilização.

Origem dos nomes das tags: