Fundamentos de Tabelas
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 48 de 60.
No HTML, uma tabela é uma forma de organizar dados em linhas e colunas. As tabelas são comumente usadas para exibir dados em um formato estruturado, como agendas, estatísticas ou qualquer outro tipo de informação que possa ser apresentada em uma grade. Para criar uma tabela, você usa a tag <table> junto com outras tags como <tr> para linhas da tabela, <td> para dados da tabela (células) e <th> para cabeçalhos da tabela.
Aqui está a estrutura básica de uma tabela HTML:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: A tag que define a tabela.
<tr>: A tag que define uma linha de tabela.
<th>: A tag que define uma célula de cabeçalho. Células de cabeçalho são tipicamente usadas para títulos de colunas ou linhas e são exibidas em negrito por padrão.
<td>: A tag que define uma célula padrão na tabela.
Veja como esta tabela seria renderizada em um navegador:
| Cabeçalho 1 | Cabeçalho 2 |
|---|---|
| Linha 1, Célula 1 | Linha 1, Célula 2 |
| Linha 2, Célula 1 | Linha 2, Célula 2 |
Neste exemplo, temos uma tabela com duas linhas e duas colunas. A primeira linha contém células de cabeçalho, e as linhas subsequentes contêm células de dados regulares. Esta estrutura cria um layout de grade simples que é fácil de ler e entender.
Desafio
FácilCrie um documento HTML que inclua uma tabela com a seguinte estrutura:
- Uma tag
<table>para definir a tabela. - Uma linha da tabela (
<tr>) para o cabeçalho com duas células de cabeçalho (<th>). A primeira célula de cabeçalho deve dizer "Name" e a segunda deve dizer "Age". - Uma linha da tabela (
<tr>) com duas células de dados (<td>). A primeira célula deve dizer "John" e a segunda deve dizer "30". - Outra linha da tabela (
<tr>) com duas células de dados (<td>). A primeira célula deve dizer "Jane" e a segunda deve dizer "25".
Folha de consulta
As tabelas HTML organizam dados em linhas e colunas usando a tag <table>:
<table>: Define a tabela<tr>: Define uma linha da tabela<th>: Define uma célula de cabeçalho (exibida em negrito por padrão)<td>: Define uma célula de dados padrão
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<!-- Escreva o código aqui -->
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais10Tabelas
Fundamentos de TabelasAdicionando LegendasMesclando Linhas e ColunasRecapitulação - Tabelas2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de Rodapé