Trabalhando com Tabelas em HTML: Estruturação e Prática com Exercícios

Postado Por:

Categoria:

HTML, Introdução

Postado em:

08/17/2024

Trabalhando com Tabelas em HTML: Estruturação e Prática com Exercícios

Aprenda a criar e formatar tabelas em HTML para organizar dados de forma clara e estruturada.

Introdução às Tabelas em HTML

Tabelas em HTML são utilizadas para organizar dados em linhas e colunas, facilitando a visualização de informações tabulares. Embora seu uso tenha sido reduzido para layout visual em favor do CSS, as tabelas ainda são essenciais para apresentar dados estruturados, como em relatórios e grades.

Estrutura Básica de uma Tabela

Uma tabela em HTML é composta por várias tags, cada uma com sua função específica. Aqui está a estrutura básica de uma tabela:

.porto-u-1941.porto-u-heading{text-align:left}
<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
            <th>Cidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>João</td>
            <td>28</td>
            <td>São Paulo</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>24</td>
            <td>Rio de Janeiro</td>
        </tr>
    </tbody>
</table>
Explicação das Tags:
  • <table>: Inicia a tabela.
  • <thead>: Define o cabeçalho da tabela.
  • <tr>: Representa uma linha na tabela.
  • <th>: Define uma célula de cabeçalho, geralmente exibida em negrito.
  • <tbody>: Contém o corpo da tabela, onde os dados principais são inseridos.
  • <td>: Define uma célula de dados na tabela.

Atributos Importantes em Tabelas

As tabelas podem ser personalizadas usando atributos que alteram a largura, altura, borda e outras propriedades das células. Aqui estão alguns exemplos:

  • border: Adiciona borda à tabela e suas células.
  • colspan: Faz com que uma célula ocupe várias colunas.
  • rowspan: Faz com que uma célula ocupe várias linhas.

Exemplo de uso de colspan e rowspan:

.porto-u-3277.porto-u-heading{text-align:left}
<table border="1">
    <thead>
        <tr>
            <th colspan="2">Nome Completo</th>
            <th rowspan="2">Idade</th>
        </tr>
        <tr>
            <th>Primeiro Nome</th>
            <th>Sobrenome</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>João</td>
            <td>Silva</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

Exercícios Práticos

  1. Criando uma Tabela Simples:

    • Crie uma tabela para listar seus cinco filmes favoritos, incluindo colunas para o título, ano de lançamento e diretor.

  2. Tabela de Contatos:

    • Crie uma tabela para armazenar informações de contato, incluindo colunas para nome, telefone, e-mail e cidade. Adicione uma linha de cabeçalho usando <thead> e <th>.

  3. Tabela de Notas de Alunos:

    • Crie uma tabela para armazenar as notas de cinco alunos em três disciplinas. Use colspan para criar uma célula de cabeçalho que abranja todas as disciplinas.

  4. Tabela de Agenda:

    • Crie uma tabela para organizar um cronograma semanal, com dias da semana como colunas e horários como linhas. Use rowspan para combinar células em horários que ocupam mais de uma linha.

Conclusão

Tabelas em HTML são uma maneira eficiente de organizar dados em suas páginas web. Compreender a estrutura básica e os atributos de tabelas permite que você apresente informações de forma clara e acessível. Com os exercícios práticos, você poderá reforçar seu entendimento e se preparar para criar tabelas mais complexas em seus projetos futuros.

Para mais informações e referências sobre tabelas em HTML, consulte a documentação oficial do HTML no MDN Web Docs.

Referências

.porto-u-9391.porto-u-heading{text-align:left}
Share:

Author

Deixe seu comentário

Posts RELACIONADOS

Introdução ao React: Como Iniciar Seu Primeiro Projeto

React é uma biblioteca JavaScript amplamente utilizada para a construção de interfaces de usuário dinâmicas e componentes reutilizáveis. Neste tutorial, você aprenderá os conceitos básicos...

09/14/2024

Como Criar um Chat em Tempo Real com PHP e WebSockets

Neste tutorial, você aprenderá como criar um sistema de chat em tempo real utilizando WebSockets com PHP para o backend e HTML, CSS e JavaScript...

09/13/2024

Domine o Flexbox: A Solução CSS para Layouts Flexíveis e Responsivos

O Flexbox é uma poderosa ferramenta do CSS que simplifica a criação de layouts flexíveis e responsivos. Neste post, você descobrirá como usar o Flexbox...

08/31/2024

Guia Completo de CSS: Principais Propriedades e Como Utilizá-las com Classes

O CSS é uma linguagem fundamental para estilizar páginas web. Este guia detalhado aborda as principais propriedades do CSS e como utilizá-las eficientemente usando classes....

08/24/2024

Introdução ao MySQL: Consultas Básicas com o Banco de Dados Sakila

MySQL é um dos sistemas de gerenciamento de banco de dados mais populares e amplamente utilizados no desenvolvimento web. Neste post, exploraremos os conceitos básicos...

08/22/2024

Introdução ao Desenvolvimento Web com HTML: Primeiros Passos para Criar Páginas Web

O HTML (HyperText Markup Language) é a linguagem fundamental para o desenvolvimento de páginas web. Neste post, vamos explorar os conceitos básicos do HTML, entender...

08/10/2024