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?

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!

Blog