Tabelas HTML: Crie e Estruture Dados

Introdução

As tabelas HTML são usadas para exibir dados em um formato estruturado e tabular, consistindo em linhas e colunas. Isso é essencial para apresentar informações como comparações de produtos, relatórios financeiros ou cronogramas de forma clara e organizada.

Neste laboratório, você aprenderá os blocos de construção fundamentais de uma tabela HTML. Você começará criando a estrutura básica da tabela e adicionará progressivamente linhas, cabeçalhos e células de dados para construir uma tabela completa e funcional.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 99%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar tag de tabela para a estrutura da tabela

Nesta etapa, você criará o contêiner principal para sua tabela. A tag <table> é o elemento raiz de qualquer tabela HTML e engloba todos os outros elementos relacionados à tabela.

Primeiro, vamos configurar a estrutura básica do documento HTML. No explorador de arquivos à esquerda, encontre e abra o arquivo index.html localizado no diretório ~/project.

Adicione o seguinte código boilerplate ao index.html. Este código define um documento HTML5 padrão e inclui um elemento <table> vazio dentro do <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Após adicionar o código, você pode clicar na aba Web 8080 no topo da interface para visualizar sua página. Você ainda não verá nada, pois a tabela está vazia, mas isso confirma que o arquivo está sendo servido corretamente.

Adicionar tags tr para linhas de tabela

Nesta etapa, você adicionará linhas à sua tabela. Cada linha horizontal em uma tabela é definida pela tag <tr>, que significa "table row" (linha da tabela). Todo o conteúdo dentro de uma linha, como cabeçalhos ou células de dados, deve ser colocado dentro de um elemento <tr>.

Vamos adicionar duas linhas à nossa tabela. A primeira linha eventualmente conterá os cabeçalhos das colunas e a segunda conterá os dados.

Modifique seu arquivo index.html para incluir dois elementos <tr> dentro da tag <table>, assim:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

Salve o arquivo. Se você verificar a aba Web 8080, ainda não verá nenhuma mudança visível porque as linhas ainda não contêm nenhum conteúdo ou bordas.

Inserir tags th para células de cabeçalho

Nesta etapa, você definirá as células de cabeçalho para sua tabela. As células de cabeçalho são criadas usando a tag <th>, que significa "table header" (cabeçalho da tabela). Essas tags são colocadas dentro de um elemento <tr> e geralmente são renderizadas como texto em negrito e centralizado, distinguindo-as das células de dados regulares.

Vamos adicionar dois cabeçalhos à primeira linha da nossa tabela: "Name" (Nome) e "Age" (Idade).

Atualize seu arquivo index.html adicionando dois elementos <th> dentro da primeira tag <tr>:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

Agora, se você mudar para a aba Web 8080, verá os cabeçalhos "Name" e "Age" exibidos.

Usar tags td para células de dados

Nesta etapa, você adicionará os dados reais à sua tabela. As células de dados padrão são criadas com a tag <td>, que significa "table data" (dados da tabela). Essas tags são colocadas dentro de um elemento <tr> e contêm as informações correspondentes aos cabeçalhos das colunas.

Vamos adicionar uma linha de dados para uma pessoa chamada "Alice", que tem "30" anos. Esses dados irão para a segunda linha da nossa tabela.

Atualize seu arquivo index.html adicionando dois elementos <td> dentro da segunda tag <tr>:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Salve o arquivo e verifique a aba Web 8080. Agora você verá os dados "Alice" e "30" exibidos na segunda linha, alinhados sob seus respectivos cabeçalhos.

Adicionar atributo border à tabela para visibilidade

Nesta etapa, você tornará a estrutura da tabela visível. Por padrão, as tabelas HTML são renderizadas sem bordas. Para adicionar rapidamente uma borda para visualização, você pode usar o atributo border na tag <table>.

Vamos adicionar uma borda de 1 pixel à nossa tabela. Modifique a tag <table> de abertura em index.html para incluir border="1".

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Após salvar o arquivo, atualize a aba Web 8080. Agora você verá uma tabela completa com bordas visíveis ao redor da tabela e de cada célula, mostrando claramente a estrutura de linhas e colunas. Embora o atributo border seja simples, o design web moderno utiliza CSS para estilização, o que oferece muito mais controle e flexibilidade.

Resumo

Parabéns! Você criou com sucesso uma tabela HTML básica.

Neste laboratório, você aprendeu a:

Usar a tag <table> para criar um contêiner de tabela.
Usar a tag <tr> para definir linhas de tabela.
Usar a tag <th> para criar células de cabeçalho para colunas.
Usar a tag <td> para adicionar células de dados.
Adicionar um atributo border para tornar a estrutura da tabela visível.

Estes são os elementos essenciais para exibir qualquer tipo de dado tabular em uma página web. Agora você pode construir sobre esta base para criar tabelas mais complexas e estilizadas.