Criar Tabelas HTML: Guia Completo com Atributos Básicos

Introdução

Neste laboratório, os alunos aprenderão a criar e manipular tabelas HTML usando tags e atributos fundamentais de tabelas HTML. O laboratório foca na compreensão da estrutura central das tabelas HTML, incluindo tags essenciais como <table>, <tr>, <td> e <th>, que são cruciais para organizar e apresentar dados em um formato estruturado, semelhante a uma grade, em páginas web.

Os participantes progredirão por uma jornada de aprendizado abrangente que cobre a criação de tabelas básicas, a adição de seções de cabeçalho e corpo, a mesclagem de células usando colspan e rowspan, e a aplicação de atributos de estilo básicos. Ao final do laboratório, os alunos terão habilidades práticas na construção de tabelas HTML bem estruturadas, compreendendo como representar dados de forma eficaz usando elementos de tabela HTML e seus atributos associados.

Entenda a Estrutura da Tabela HTML e Tags Básicas

Nesta etapa, você aprenderá a estrutura fundamental e as tags básicas usadas para criar tabelas HTML. As tabelas HTML são essenciais para organizar e exibir dados em um formato estruturado, semelhante a uma grade, em páginas web.

As tabelas HTML são criadas usando várias tags-chave:

<table>: O contêiner principal para toda a tabela
<tr>: Define uma linha da tabela
<td>: Define uma célula de tabela padrão (célula de dados)
<th>: Define uma célula de cabeçalho da tabela

Vamos criar um exemplo simples para demonstrar essas tags básicas de tabela. Abra o WebIDE e crie um novo arquivo chamado basic_table.html no diretório ~/project.

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

Vamos analisar a estrutura da tabela:

<table border="1"> cria o contêiner da tabela com uma borda visível, o atributo border é opcional.
O primeiro <tr> contém células de cabeçalho <th> para os títulos das colunas
Os <tr> elementos subsequentes contêm células de dados <td> com o conteúdo real

Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE.

Exemplo de estrutura de tabela HTML

Pontos-chave para lembrar:

Cada <tr> representa uma linha na tabela
<th> é usado para células de cabeçalho (tipicamente em negrito e centralizadas)
<td> é usado para células de dados padrão
O atributo border ajuda a visualizar a estrutura da tabela (embora CSS seja preferido para estilização em aplicações do mundo real)

Crie uma Tabela Simples com Linhas e Colunas

Nesta etapa, você aprenderá a criar uma tabela mais complexa com múltiplas linhas e colunas. Com base na etapa anterior, exploraremos como estruturar tabelas com diferentes números de linhas e colunas para exibir informações de forma eficaz.

Abra o WebIDE e crie um novo arquivo chamado product_table.html no diretório ~/project. Criaremos uma tabela de inventário de produtos para demonstrar a criação de tabelas com múltiplas linhas e colunas.

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

Pontos-chave sobre a criação de tabelas com múltiplas linhas e colunas:

Cada <tr> (linha da tabela) representa uma linha horizontal na tabela
Dentro de cada <tr>, múltiplos elementos <td> (dados da tabela) criam colunas
O número de elementos <td> em cada <tr> determina o número de colunas
Todas as linhas devem ter o mesmo número de colunas para um layout consistente
O atributo border ajuda a visualizar a estrutura da tabela

Observe como criamos uma tabela de 4 colunas com:

A primeira linha como cabeçalhos de coluna
Três linhas adicionais com informações do produto
Cada linha contém quatro células correspondentes às colunas

A saída de exemplo em um navegador web mostraria uma grade 4x4 exibindo detalhes do inventário do produto.

Exemplo de tabela de inventário de produtos

Adicione Cabeçalhos e Seções de Corpo à Tabela

Nesta etapa, você aprenderá como melhorar a estrutura da tabela usando as tags HTML semânticas <thead>, <tbody> e <tfoot> para organizar o conteúdo da tabela de forma mais eficaz. Essas tags ajudam a melhorar a legibilidade e a acessibilidade de suas tabelas HTML.

Abra o WebIDE e crie um novo arquivo chamado student_grades.html no diretório ~/project. Criaremos uma tabela de notas de alunos demonstrando o uso de tags de seção de tabela.

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Pontos-chave sobre as seções da tabela:

<thead>: Contém linhas de cabeçalho com títulos de coluna
<tbody>: Contém as principais linhas de dados
<tfoot>: Contém linhas de resumo ou rodapé
Use <th> para células de cabeçalho em vez de <td>
Essas tags semânticas ajudam a melhorar a estrutura e a acessibilidade da tabela

O exemplo demonstra:

Uma linha de cabeçalho com títulos de coluna usando <th>
Múltiplas linhas de dados no <tbody>
Uma linha de rodapé com médias da turma em <tfoot>

A saída de exemplo em um navegador web mostraria uma tabela estruturada com seções claras para cabeçalhos, corpo e rodapé.

Exemplo de tabela de notas de alunos

Mesclar Células da Tabela Usando Colspan e Rowspan

Nesta etapa, você aprenderá como mesclar células de tabela horizontalmente e verticalmente usando os atributos colspan e rowspan. Esses atributos permitem que você crie layouts de tabela mais complexos e flexíveis, combinando múltiplas células.

Abra o WebIDE e crie um novo arquivo chamado event_schedule.html no diretório ~/project. Criaremos uma tabela de programação de eventos demonstrando a mesclagem de células.

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Pontos-chave sobre colspan e rowspan:

colspan: Mescla células horizontalmente em colunas
- Exemplo: <td colspan="2"> abrange a célula em 2 colunas
rowspan: Mescla células verticalmente em linhas
- Exemplo: <td rowspan="2"> abrange a célula em 2 linhas
Ao usar esses atributos, remova as células correspondentes em outras linhas

Neste exemplo:

O "Keynote Speech" abrange 2 linhas na Sala A
O "Lunch Break" abrange 2 colunas em ambas as salas
Outras células mantêm seu layout padrão de célula única

A saída de exemplo em um navegador web mostraria uma tabela com células mescladas, criando uma programação mais compacta e organizada.

Exemplo de tabela HTML com células mescladas

Estilizar e Personalizar Atributos da Tabela

Nesta etapa, você aprenderá como estilizar e personalizar tabelas HTML usando CSS inline e atributos HTML. A estilização adequada pode melhorar a legibilidade e o apelo visual de suas tabelas.

Abra o WebIDE e crie um novo arquivo chamado styled_table.html no diretório ~/project. Criaremos uma tabela com várias técnicas de estilização.

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Técnicas de estilização chave demonstradas:

border-collapse: Remove o espaçamento entre as células da tabela
Fonte e tipografia personalizadas
Linha de cabeçalho colorida
Cores de linha alternadas usando :nth-child(even)
Efeito de hover nas linhas da tabela
Estilização de preenchimento (padding) e borda para células

Opções de estilização incluem:

CSS inline na tag <style>
Arquivo CSS separado (recomendado para projetos maiores)
Estilos inline usando o atributo style
Propriedades CSS para layout, cores e interatividade

A saída de exemplo em um navegador web mostraria uma tabela estilizada profissionalmente, fácil de ler, com efeitos de hover e cores.

Exemplo de tabela HTML estilizada

Resumo

Neste laboratório, os participantes aprenderam os fundamentos da criação de tabelas HTML usando tags HTML essenciais como <table>, <tr>, <td> e <th>. O laboratório guiou os alunos através da compreensão da estrutura da tabela, da criação de tabelas básicas com linhas e colunas e da exploração de técnicas para adicionar cabeçalhos, mesclar células e personalizar atributos de tabela.

Os exercícios práticos demonstraram como construir apresentações de dados estruturadas, em grade, em páginas web, cobrindo conceitos-chave como definir linhas de tabela, criar células de cabeçalho e dados e usar atributos como border para aprimorar a visualização da tabela. Os participantes ganharam experiência prática na construção de tabelas HTML semânticas e bem organizadas que podem exibir informações de forma eficaz em vários cenários de design web.

Criar Tabelas HTML com Atributos Básicos