DEV Community

Cover image for Tags HTML para Tabelas e Dicas do VS Code.
Douglas Toledo
Douglas Toledo

Posted on

11 2

Tags HTML para Tabelas e Dicas do VS Code.

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?

Alt Text

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:

Alt Text

  • <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:

Alt Text


Para criamos cabeçalhos no <thead>:

  • Usamos a tag <th> table head:

Alt Text


Para criamos dados no <tbody> e no <tfoot>:

  • Usamos a tag <td> table data:

Alt Text


Na prática:

Começamos montando uma tabela abrindo e fechando a tag <table>:



<table>

</table>


Enter fullscreen mode Exit fullscreen mode

1 - Table Header

Agora vamos adicionar a primeira parte de uma tabela, os cabeçalhos (usando a tag <thead>):



<table>
    <thead>

    </thead>
</table>


Enter fullscreen mode Exit fullscreen mode

Adicionamos uma linha usando a tag <tr> para começar a escrever os cabeçalhos:



<table>
    <thead>
        <tr>

        </tr>
    </thead>
</table>


Enter fullscreen mode Exit fullscreen mode

E adicionamos cada cabeçalho usando a tag <th>:



<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Sobrenome</th>
            <th>Idade</th>
        </tr>
    </thead>
</table>


Enter fullscreen mode Exit fullscreen mode

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:

  1. Abra o VS Code, crie um arquivo .html, digite ! e aperte Enter para criar uma estrutura básica HTML;
  2. Entre as tags <body> e </body> vai digitando table>thead>tr>th+th+th;
  3. Aperte Enter!

Alt Text

Temos todo o código feito acima de maneira rápida. É só colocar os 3 cabeçalhos (Nome, Sobrenome e Idade). Explicando o atalho:

Alt Text

O resultado até o momento deverá ser:
Alt Text

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Atalho do VS Code
Alt Text

Olha o resultado parcial (sem o <tfoot>):
Alt Text

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (3)

Collapse
 
erisvaldodevfrontend profile image

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

Image description

Collapse
 
dwtoledo profile image
Douglas Toledo • Edited

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...

Collapse
 
alsouza93 profile image
Alessandra Souza

Muito bom!!! Amando essa série de artigos!

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay