Criando Tabelas em HTML

Tabelas em HTML

Aprenda a criar tabelas em HTML usando <table>, <tr>, <td>, e <th>. Veja exemplos de tabelas com cabeçalhos e dados e descubra como estruturar e estilizar suas tabelas para obter a melhor apresentação.

Criando Tabelas em HTML

As tabelas são essenciais para organizar dados de forma clara e estruturada em páginas web. Em HTML, a criação de tabelas envolve o uso de várias tags específicas, como <table>, <tr>, <td>, e <th>. Neste post, vamos explorar como criar tabelas, adicionar cabeçalhos e dados, e fornecer exemplos práticos para ajudá-lo a dominar o uso de tabelas em HTML.

Estrutura Básica de uma Tabela

A estrutura básica de uma tabela HTML inclui as tags <table> para definir a tabela, <tr> para definir as linhas da tabela, <td> para definir as células de dados e <th> para definir as células de cabeçalho.

Exemplo Básico

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Cidade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
    <td>Rio de Janeiro</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>35</td>
    <td>Belo Horizonte</td>
  </tr>
</table>

Descrição das Tags

<table>: Define o início e o fim de uma tabela.
<tr>: Define uma linha na tabela.
<td>: Define uma célula de dados na tabela.
<th>: Define uma célula de cabeçalho na tabela, que geralmente aparece em negrito e centralizado.

Adicionando Cabeçalhos

Os cabeçalhos das tabelas são importantes para descrever o conteúdo das colunas e facilitar a leitura dos dados. Você pode adicionar cabeçalhos usando a tag <th> dentro da tag <tr> da primeira linha.

Exemplo com Cabeçalhos

<table>
  <tr>
    <th>Produto</th>
    <th>Preço</th>
    <th>Quantidade</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>R$ 3.000,00</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>R$ 1.500,00</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tablet</td>
    <td>R$ 800,00</td>
    <td>15</td>
  </tr>
</table>

Estilizando Tabelas

A estilização das tabelas pode ser feita usando CSS para melhorar a aparência e a legibilidade. Aqui está um exemplo de como adicionar CSS básico para estilizar uma tabela:

Exemplo com CSS

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>Produto</th>
    <th>Preço</th>
    <th>Quantidade</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>R$ 3.000,00</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>R$ 1.500,00</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tablet</td>
    <td>R$ 800,00</td>
    <td>15</td>
  </tr>
</table>

Mesclando Células

Às vezes, é necessário mesclar células para criar cabeçalhos ou células que ocupem várias colunas ou linhas. Isso pode ser feito usando os atributos colspan e rowspan.

Exemplo de Células Mescladas

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Cidade</th>
  </tr>
  <tr>
    <td rowspan="2">João</td>
    <td>30</td>
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>31</td>
    <td>Campinas</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td colspan="2">Rio de Janeiro</td>
  </tr>
</table>

Melhorando a Acessibilidade

Para melhorar a acessibilidade das tabelas, você pode usar atributos adicionais, como scope, que ajuda leitores de tela a entender a relação entre cabeçalhos e células de dados.

Exemplo com Acessibilidade

<table>
  <tr>
    <th scope="col">Produto</th>
    <th scope="col">Preço</th>
    <th scope="col">Quantidade</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>R$ 3.000,00</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>R$ 1.500,00</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tablet</td>
    <td>R$ 800,00</td>
    <td>15</td>
  </tr>
</table>

Conclusão

Criar tabelas em HTML é uma habilidade essencial para desenvolver páginas web organizadas e informativas. Com a combinação das tags <table>, <tr>, <td>, e <th>, você pode criar tabelas claras e bem estruturadas. Adicionar estilos CSS e usar atributos de acessibilidade garante que suas tabelas não apenas fiquem bonitas, mas também sejam funcionais para todos os usuários. Experimente os exemplos fornecidos e comece a criar suas próprias tabelas em HTML.