top of page

Do zero a iniciante - HTML tables

Foto do escritor: Fábio HenriqueFábio Henrique

Uma forma muito boa de se exibir dados é no formato de tabela. Neste post irei mostrar como construir tabelas utilizando HTML


Tabelas HTML consistem no uso da tag <table> e uma ou mais tags <th>, <tr> e <td>


<html>
<head>
    <style>
        table,
           th,
           td {
                border: 1px solid black;
                border-collapse: collapse;
           }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Celular</th>
            <th>Modelo</th>
        </tr>
        <tr>
            <td>Xiaomi</td>
            <td>MI9</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>Galaxy S10</td>
        </tr>
    </table>
</body>
</html>

A novidade do código acima é a tag <style> e o conteúdo dentro dela. Isso tem haver com CSS que será o próximo assunto dos posts.


As tags <th> representam os cabeçalhos da tabela

As tags <tr> representam as linhas da tabela

As tags <td> representam as colunas da tabela


Exercício


Crie uma tabela contendo informações de nome e idade de 3 amigos seus. Como mostra o exemplo abaixo



 

Deixe seus elogios, críticas e dúvidas nos comentários!

62 visualizações3 comentários

Posts recentes

Ver tudo

3 Comments


Igor Macedo
Igor Macedo
Dec 10, 2021

bouaaa, peguei um bom entendimento nessa em, bem explicado.

Like

Fábio Henrique
Fábio Henrique
Jul 09, 2020

Obrigado! E qualquer dúvida que tiver é só postar nos comentários

Like

Gabriel Orgo
Gabriel Orgo
Jul 08, 2020

Achei muito bem explicado!

Like
Nunca perca um post. Assine agora!

Fique sempre por dentro das dicas ninjas de programação com o uso de stacks poderosas como React, Angular, NetCore e muito mais!

© 2020 por equipe DevNinja.

  • Facebook
  • Twitter
Ativo 4.png
bottom of page