Conteúdo do Curso
HTML Definitivo
HTML Definitivo
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?
Obrigado pelo seu feedback!
