Conteúdo do Curso

HTML Definitivo

1. Compreendendo o Desenvolvimento Web

Bem-vindo ao HTML e Desenvolvimento Web O Que É a Internet?Como a Internet Funciona?Compreendendo Como os Sites Funcionam Explicação Sobre Desenvolvimento Frontend e Backend

2. Tags e Atributos HTML

Compreensão das Tags HTML Trabalhando com Atributos HTML Compreensão de Tags Pareadas e Únicas em HTML Marcação e Formatação de Texto em HTML Desafio: Crie o Parágrafo da Sua Primeira Página Web Desafio: Construir uma Página Web de Apresentação Pessoal Desafio: Criar uma Página Web de Exibição de Filmes Usando Links e Botões em HTML Desafio: Criar Links para Sites Populares Validando Seu Código HTML para Melhores Práticas

3. Estrutura do Documento HTML

Os Segredos por Trás de Páginas Web Bem Estruturadas Compreensão da Estrutura do Documento HTML O Papel do Head do Documento Gerenciamento do Fluxo e Layout do Documento Desafio: Estruturar Corretamente um Documento HTML Usando Ferramentas de Desenvolvedor para Inspeção e Depuração de HTML

4. Trabalhando com Mídia e Tabelas

Adicionando Imagens em HTML Desafio: Trabalhar com Imagens Trabalhando com Imagens Clicáveis, Legendas e Otimização Compreendendo Gráficos Vetoriais e Rasterizados Incorporação de Áudio e Vídeo para Conteúdo Multimídia Avançado Desafio: Incorporar Áudio e Vídeo em HTML Criando e Estruturando Tabelas em HTML Desafio: Criar uma Tabela HTML Funcional

5. Formulários HTML e Entrada do Usuário

Introdução aos Formulários HTML Fundamentos da Criação de Formulários em HTML Usando Rótulos para Melhor Acessibilidade de Formulários Aperfeiçoando Formulários com Atributos de Entrada Explorando Diferentes Tipos de Entrada em HTML Desafio: Criar Formulário com Campos e Rótulos Trabalhando com o Elemento Textarea para Entrada Multilinha Usando o Elemento Select para Menus Suspensos Usando o Elemento Datalist para Sugestões de Entrada Predefinidas Agrupamento de Elementos de Formulário para Melhor Estrutura

Criando e Estruturando Tabelas em HTML

Tabelas são úteis para apresentar relações complexas organizando o conteúdo em células. Elas são particularmente eficazes para exibir dados tabulares, como horários de transporte, calendários, folhas de pagamento, resultados de partidas, transações financeiras, cardápios de restaurantes, listas de preços e outras informações que se encaixam naturalmente em um formato de tabela, semelhante ao Google Sheets.

Para criar tabelas em HTML, utilize os seguintes elementos principais:

<table>: define uma tabela em uma página web;
<tr>: define uma linha dentro da tabela;
<th>: define uma célula de cabeçalho dentro de uma linha. Células de cabeçalho geralmente aparecem em negrito e centralizadas;
<td>: define uma célula de dados padrão dentro de uma linha.

Veja as etapas para criar uma tabela para um cardápio:

Etapa 1: Estruture o HTML

Comece criando a estrutura básica do HTML para sua página:

html

Etapa 2: Definir a tabela

Dentro do elemento <body>, adicione a tag <table> para definir a tabela:

html

Etapa 3: Adicionar uma legenda à tabela (Opcional)

Se desejar fornecer um título para a tabela, utilize a tag <caption>:

html

Etapa 4: Criar cabeçalhos da tabela

Em seguida, adicione os cabeçalhos da tabela dentro do elemento <thead>. Cada cabeçalho é definido usando a tag <th>:

html

Passo 5: Preencher a Tabela com Dados

Utilize o elemento <tbody> para envolver as linhas da tabela e as tags <td> para definir as células que contêm os dados:

html

Código Completo

Reserve um momento para examinar todos os elementos cuidadosamente e garantir que a relação entre eles esteja clara.

index.html

index.css

Observação

Por padrão, as tabelas HTML não possuem um estilo visual específico. Para personalizar a aparência da tabela, adicione estilos CSS em um arquivo CSS separado ou dentro de uma tag <style> na seção <head> do arquivo HTML.

No entanto, não é necessário se aprofundar em CSS neste momento, pois o foco atual é apenas em HTML.

Se desejar visualizar a tabela sem qualquer estilização CSS, você pode remover a linha 4: <link rel="stylesheet" href="index.css" />, que importa os estilos CSS.

Caso queira aprender mais sobre CSS, considere o curso Fundamentos de CSS.

1. Qual é o elemento HTML utilizado para definir uma tabela em uma página web?

2. Qual elemento HTML é utilizado para definir uma linha dentro de uma tabela?

3. Qual é a finalidade do elemento `<th>` em uma tabela HTML?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7