Definição e Criação de Tabelas HTML

Introdução

Tabelas HTML são comumente usadas para exibir dados tabulares em páginas web. Neste laboratório, você aprenderá como criar tabelas HTML básicas usando as tags <table>, <tr>, <td> e <th>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

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 85%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criando a Tabela

Vamos começar criando um novo arquivo HTML chamado index.html e configurando a estrutura básica. Dentro das tags <body>, crie um elemento <table>. Este elemento conterá todas as linhas e colunas da sua tabela.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Definindo Linhas

Em seguida, defina as linhas da sua tabela usando a tag <tr>. Cada linha conterá uma ou mais células. Para criar uma única célula, use a tag <td>.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Adicionando um Cabeçalho de Tabela

Em alguns casos, você pode querer adicionar uma linha de cabeçalho à sua tabela. Para fazer isso, use a tag <th> em vez da tag <td>.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Adicionando Bordas e Estilos

Por padrão, as tabelas HTML têm estilo mínimo e nenhuma borda. Para adicionar uma borda à sua tabela, use a propriedade CSS border.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Resumo

Seguindo este tutorial, você aprendeu como criar uma tabela HTML básica e estilizar-la usando CSS. As tabelas podem ser ainda mais personalizadas adicionando atributos como colspan e rowspan às células, e usando tags adicionais como <caption> e <thead>. Com essas ferramentas, você pode criar tabelas complexas e informativas para exibir dados em suas páginas web.

Definição de Tabela HTML