HTML - 7. Tabelas


Para criar tabelas no HTML, temos as seguintes tags:

table: Define-se uma tabela.
tr: Define-se uma linha da tabela, que pode ter células.
td: Define-se uma célula.
<table>
  <tr>
    <td>Coluna 1</td><td>Coluna 2</td>
  </tr>
  <tr>
    <td>Valor 1</td><td>Valor 2</td>
  </tr>
</table>
Isto fará uma tabela contendo 2x2 contendo os respectivos valores da seguinte forma:


Há outras tags que definem cabeçalhos de uma tabela, como a seguir:

<table>
  <tr>
    <th>Coluna 1</th><th>Coluna 2</th>
  </tr>
  <tr>
    <td>Coluna 1</td><td>Coluna 2</td>
  </tr>
</table>


th: Define-se que a coluna é parte de um título, ou cabeçalho da tabela.

Por questão de organização, e talvez de conseguir selecionar elementos de forma mais fácil em folha de estilos, há também outras tags, como:

thead, tbody: Pode separar a tabela entre cabeçalho e corpo, sem precisar especificar célula por célula.

<table>
  <thead>
    <tr>
      <td>Coluna 1</td><td>Coluna 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valor 1</td><td>Valor 2</td>
    </tr>
    <tr>
      <td>Valor 1</td><td>Valor 2</td>
    </tr>
  </tbody>
</table>

Comentários