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:
<!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>, adicione a tag <table> para definir a tabela:
<table>
<!-- Table content will go here -->
</table>
Etapa 3: Adicionar uma legenda à tabela (Opcional)
Se desejar fornecer um título para a tabela, utilize a tag <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
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>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
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:
<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
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!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.56Criando e Estruturando Tabelas em HTML
Deslize para mostrar o menu
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:
<!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>, adicione a tag <table> para definir a tabela:
<table>
<!-- Table content will go here -->
</table>
Etapa 3: Adicionar uma legenda à tabela (Opcional)
Se desejar fornecer um título para a tabela, utilize a tag <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
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>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
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:
<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
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!
