0Pricing
HTML for Kids · Aula

Tabelas: organizando dados

Aprenda a criar tabelas para exibir informações

Tabelas: organizando dados é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.

Tabelas: organizando dados

Boas-vindas à próxima lição! Hoje, aprenderemos a criar tabelas em HTML. As tabelas são ótimas para organizar informações em linhas e colunas.

Tabelas: organizando dados — ilustração 1

O que são tabelas?

As tabelas são uma forma de exibir informações em um formato estruturado. Cada tabela é composta por linhas e colunas.

Veja como é uma tabela:

Name      Age      City

Alice     12       New York

Bob       15       London

Vamos criar essa tabela usando HTML!

Criando uma tabela simples

As tabelas em HTML são criadas usando a tag <table>. As linhas são criadas usando a tag <tr>, e as células são criadas usando a tag <td>.

Exemplo:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Adicionando um cabeçalho à tabela

Você pode adicionar cabeçalhos à sua tabela usando a tag <th>. Os cabeçalhos tornam sua tabela mais compreensível.

Exemplo:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Adicionando uma borda à tabela

Por padrão, as tabelas não têm bordas. Você pode adicionar uma borda usando o atributo border ou CSS.

Exemplo:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Mesclando colunas e linhas

Às vezes, pode ser necessário que uma célula se estenda por várias colunas ou linhas. Use o atributo colspan ou rowspan para fazer isso.

Exemplo:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Estilizando sua tabela

Você pode melhorar a aparência da sua tabela usando CSS. Por exemplo, pode alterar as cores, adicionar espaçamento interno ou alinhar o texto.

Exemplo:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Experimente você mesmo

Vamos criar uma tabela que liste seus filmes favoritos. Veja um exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

Muito bem!

Parabéns! Você aprendeu a criar tabelas, adicionar cabeçalhos e até mesmo estilizar tabelas. As tabelas são uma excelente forma de organizar e exibir dados. Na próxima lição, aprenderemos sobre formulários para coletar dados dos usuários. Prepare-se para tornar suas páginas interativas!

Tabelas: organizando dados — ilustração 10

Perguntas Frequentes

A aula “Tabelas: organizando dados” é grátis?

Sim — o texto completo de “Tabelas: organizando dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.

O que vou aprender em “Tabelas: organizando dados”?

Aprenda a criar tabelas para exibir informações Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML for Kids?

Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Tabelas: organizando dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML for Kids?

Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Tabelas: organizando dados
  2. Formulários: coletando dados do usuário
  3. Atributos do HTML
  4. Multimídia: adicionando vídeos e áudio
← Voltar para HTML for Kids