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 image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

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!