Conteúdo do Curso
HTML Supremo
HTML Supremo
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
index
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.
Obrigado pelo seu feedback!
