Criação e Estruturação de Tabelas em HTML
Tabelas ajudam a apresentar dados estruturados, como cronogramas, calendários, registros financeiros, cardápios e listas de preços. O HTML fornece vários elementos para construir tabelas.
Principais elementos de tabela:
<table>: o contêiner da tabela;<tr>: uma linha;<th>: uma célula de cabeçalho (negrito, centralizada);<td>: uma célula de dados comum.
A seguir, você construirá uma tabela de cardápio simples passo a passo.
Passo 1: Definir a Estrutura HTML
Comece criando a estrutura básica em HTML para sua página:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Etapa 2: Definir a tabela
Dentro do elemento <body>, adicionar a tag <table> para definir a tabela:
<table>
<!-- Table content will go here -->
</table>
Etapa 3: Adicionar uma legenda à tabela (Opcional)
Para fornecer um título à tabela, utilizar a tag <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Etapa 4: Criar cabeçalhos da tabela
Em seguida, adicionar os cabeçalhos da tabela dentro do elemento <thead>. Cada cabeçalho é definido utilizando a tag <th>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Etapa 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:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Código Completo
Dedique um momento para examinar todos os elementos cuidadosamente para garantir que a relação entre eles esteja clara.
index.html
index.css
Por padrão, 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 ver como a tabela fica sem qualquer estilização CSS, você pode remover a linha 4: <link rel="stylesheet" href="index.css" />, que importa os estilos CSS.
Se quiser aprender mais sobre CSS, considere fazer o curso CSS Fundamentals.
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!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain what each table element does in more detail?
How can I style this table to make it look better?
Can you show me how to add more rows or columns to the table?
Incrível!
Completion taxa melhorada para 2.38Criação e Estruturação de Tabelas em HTML
Deslize para mostrar o menu
Tabelas ajudam a apresentar dados estruturados, como cronogramas, calendários, registros financeiros, cardápios e listas de preços. O HTML fornece vários elementos para construir tabelas.
Principais elementos de tabela:
<table>: o contêiner da tabela;<tr>: uma linha;<th>: uma célula de cabeçalho (negrito, centralizada);<td>: uma célula de dados comum.
A seguir, você construirá uma tabela de cardápio simples passo a passo.
Passo 1: Definir a Estrutura HTML
Comece criando a estrutura básica em HTML para sua página:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Etapa 2: Definir a tabela
Dentro do elemento <body>, adicionar a tag <table> para definir a tabela:
<table>
<!-- Table content will go here -->
</table>
Etapa 3: Adicionar uma legenda à tabela (Opcional)
Para fornecer um título à tabela, utilizar a tag <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Etapa 4: Criar cabeçalhos da tabela
Em seguida, adicionar os cabeçalhos da tabela dentro do elemento <thead>. Cada cabeçalho é definido utilizando a tag <th>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Etapa 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:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Código Completo
Dedique um momento para examinar todos os elementos cuidadosamente para garantir que a relação entre eles esteja clara.
index.html
index.css
Por padrão, 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 ver como a tabela fica sem qualquer estilização CSS, você pode remover a linha 4: <link rel="stylesheet" href="index.css" />, que importa os estilos CSS.
Se quiser aprender mais sobre CSS, considere fazer o curso CSS Fundamentals.
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!
