Para mim, Tabelas em HTML é um pouco trabalhoso, pois têm muitas tags. Vou tentar explicar da maneira mais simples possível, pois você merece né! Vamos lá!
Vamos replicar a tabela abaixo?
Na tabela, temos:
- Os cabeçalhos (em inglês header): Nome e Sobrenome e;
- Os dados (em inglês data): Douglas Toledo 29 e Lorem Ipsum 35.
- O rodapé (em inglês footer): Média 32
Agora preciso que você abra o seu coração pro HTML:
Em HTML a tabela é divida em três partes:
- <thead> table header (em verde) é onde colocamos os cabeçalhos: Nome, Sobrenome e Idade;
- <tbody> table body (em azul) é onde colocamos os dados: Douglas, Toledo, 29, Lorem, Ipsum e 35;
- <tfoot> table footer (em roxo) é onde colocamos os dados do rodapé: Média e 29.
Para criamos linhas:
- Tanto em <thead>, <tbody> e <tfoot> usamos a tag <tr> table row:
Para criamos cabeçalhos no <thead>:
- Usamos a tag <th> table head:
Para criamos dados no <tbody> e no <tfoot>:
- Usamos a tag <td> table data:
Na prática:
Começamos montando uma tabela abrindo e fechando a tag <table>:
<table>
</table>
1 - Table Header
Agora vamos adicionar a primeira parte de uma tabela, os cabeçalhos (usando a tag <thead>):
<table>
<thead>
</thead>
</table>
Adicionamos uma linha usando a tag <tr> para começar a escrever os cabeçalhos:
<table>
<thead>
<tr>
</tr>
</thead>
</table>
E adicionamos cada cabeçalho usando a tag <th>:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
</thead>
</table>
Agora presta atenção nessa dica maravilhosa: no VS Code temos um atalho para escrever tags HTML que irá nos ajudar na criação de tabelas:
- Abra o VS Code, crie um arquivo .html, digite ! e aperte Enter para criar uma estrutura básica HTML;
- Entre as tags <body> e </body> vai digitando table>thead>tr>th+th+th;
- Aperte Enter!
Temos todo o código feito acima de maneira rápida. É só colocar os 3 cabeçalhos (Nome, Sobrenome e Idade). Explicando o atalho:
O resultado até o momento deverá ser:
2 - Table Body
Agora vamos para a segunda parte da tabela adicionando os dados (usando a tag <tbody>) abaixo do cabeçalho <thead>:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Como temos duas linhas de dados, vamos inserir duas tags <tr> table row:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
E por fim, colocamos cada um dos nossos dados usando a tag <td> table data, uma tag para cada dado:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Douglas</td>
<td>Toledo</td>
<td>29</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>35</td>
</tr>
</tbody>
</table>
Atalho do VS Code
Olha o resultado parcial (sem o <tfoot>):
3 - Table Footer
Agora o <tfoot> ficou fácil!
Fica como a minha lição de casa para você! rs
Parabéns!!!
Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!
Quer aprender mais?
Te convido a visitar e seguir o meu canal lá na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML!
Top comments (3)
primeiramente quero parabenizar pelo belo conteúdo, bem explicativo. Estou começando agora com Dev front-end.
fiz todo o processo, mas a minha tabela não ficou com as linhas como pode ser visto na imagem...o que ficou faltando acrescentar ou tirar...etc
Maiores Informações: (63) 98100-5789 - WhatsApp
Eita @erisvaldodevfrontend, só vi seu comentário agora, me desculpe!
Na verdade o estilo visual do meu código ficaria igual o seu mesmo.
Como esse é um conteúdo básico de HTML (estruturação) e não de CSS (estilização), eu usei o Excel para criar uma tabela, tirar prints e colocar nesse artigo. Tudo isso para o conteúdo ficar mais didático, colorido, separado, organizado para entendermos diferenciar thead, tbody, trow, etc...
Muito bom!!! Amando essa série de artigos!