Tabelas no HTML

1. Elemento <table>

O HTML oferece uma forma prática de apresentar dados de maneira estruturada usando tabelas. As tabelas ajudam a organizar informações em linhas e colunas, o que as torna convenientes para apresentar dados numéricos, cronogramas, listas de preços e outros conjuntos de dados estruturados. Vamos ver como usar as principais tags para criar tabelas: <table>, <tr>, <td> e <th>.

A tag <table> serve como contêiner para toda a tabela. Ela é usada para marcar o início e o fim da tabela e contém todas as outras tags relacionadas à tabela.

Exemplo de criação de uma tabela com a tag <table>:

<table>
  <!-- Aqui ficam as linhas e células da tabela -->
</table>

A tag <table> pode ser estilizada adicionalmente com o atributo border, para adicionar uma borda à tabela:

<table border="1">
  <tr>
    <td>Exemplo de célula</td>
  </tr>
</table>

Aqui, o atributo border="1" adiciona uma borda em torno da tabela e suas células, tornando-as visíveis.

2. Elemento <tr>

A tag <tr> representa uma linha na tabela (table row). Cada linha da tabela deve estar dentro de uma tag <tr>, que, por sua vez, fica dentro de <table>.

Exemplo:

<table border="1">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Neste exemplo, a tabela é composta por duas linhas. Cada linha contém duas células.

3. Elemento <td>

A tag <td> (table data) é usada para criar células com dados na tabela. Ela representa uma célula normal da tabela, que pode conter texto, imagens ou outro conteúdo HTML.

Exemplo de uso de <td>:

<table border="1">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
</table>

As células <td> criam o conteúdo principal da tabela e estão localizadas dentro das linhas <tr>.

4. Elemento <th>

A tag <th> (table header) é usada para criar cabeçalhos de tabela. As células criadas com <th> são, por padrão, exibidas em negrito e alinhadas ao centro. Isso é útil para marcar os cabeçalhos das colunas ou linhas.

Exemplo de tabela com cabeçalhos:

    
<table border="1">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
</tr>
<table border="1">
    
  

Neste exemplo, <th> é usado para marcar os cabeçalhos «Nome» e «Idade», permitindo que os usuários entendam facilmente o que representam os dados em cada coluna.