Tabelas

As 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, compensações salariais, 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, usamos 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. As células de cabeçalho são tipicamente em negrito e centralizadas;
<td> - define uma célula de dados padrão dentro de uma linha.

Vamos passar pelos passos para criar uma tabela para um menu:

Passo 1: configurar a estrutura HTML

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

Passo 2: definir a tabela

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

Passo 3: adicionar uma legenda à tabela (opcional)

Se desejarmos fornecer um título para a tabela, podemos usar a tag <caption>:

Passo 4: criar cabeçalhos da tabela

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

Passo 5: preencher a tabela com dados

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

Código completo do site:

Por favor, dedique um momento para examinar todos os elementos minuciosamente para garantir que a relação entre eles seja evidente.

index

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

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

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

3. Qual é o propósito do elemento `<th>` em uma tabela HTML?

Tudo estava claro?

Seção 4. Capítulo 8