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!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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