Listas UL e OL e Tabelas Tables em HTML 5

Fala pessoal, esse é o segundo artigo da nossa jornada dev para aprender HTML, nesse tópico de hoje falaremos de Listas UL e OL e também sobre tabelas. Então sente aí na cadeira, já pega um cafezinho e vamos aos estudos.

Como falei, esse é o segundo artigo sobre HTML, caso você não tenha lido o primeiro onde falo da introdução ao HTML recomendo que faça a leitura. Depois disso volte neste aqui para continuar.

O que são Listas UL e OL em HTML e onde usá-las:

Em HTML, para usamos listas devemos escrever algumas tags, a fim de organizar nossas listas e deixá-las organizadas para funcionarem.

Onde usar listas? As listas em sites são muito usadas, você verá listas em menus, e nos artigos de um blog, por exemplo. Enfim são muito uteis para organizar e destacar coisas importantes de um site.

Sabendo disso, vejamos agora como criar listas em HTML.

Criando listas em HTML

Para criar um elemento em HTML esse item ser exibido no navegador corretamente, você viu no artigo anterior que devemos escrever tags do elemento. Você viu também que a maioria das tags tem abertura e fechamento. Então como é uma tag de lista? É isso que veremos abaixo:

Acima está representação de uma tabela simples em HTML, e como podemos ver ela também uma TAG <ul></ul> que é o pai dos elementos. Ou seja, os filhos que são TAGs <li></li> são as opções da nossa lista.

O que você deve saber que quando usamos a tag UL para criar nossa lista. A lista será do tipo não ordenada.

O que são listas UL não ordenadas?

Como o nome já fala, é uma lista que não será exibida como marcadores de ordenação. Como, por exemplo: 1,2,3,4,… ou A,B,C,D,… ou ainda I,II,III,IV,…

As listas UL são decoradas por ícones de “bolinha”, e “quadradinho”. Esses marcadores aparecerão no início de cada item da lista. Conforme a imagem abaixo, após abrir nosso código da imagem 1 no navegador, temos o resultado abaixo:

Agora para ver como criar uma lista ordenada OL, vamos ver abaixo:

Listas ordenadas são enumeradas por sequência numérica, alfabética ou em algarismos romanos. Para que você tenha uma noção melhor veja o código da imagem abaixo:

Como você pode ver, estamos com a mesma lista, porém agora pelo fato de termos trocados a TAG pai de ul por OL teremos uma lista ordenada como resultado.

Como você pode notar acima a lista apareceu enumerada em ordem numerica. Afinal como mudar enumerador da nossa lista em HTML? Para fazer isso vamos ter que usar atributos na TAG pai. Lembrando que vimos sobre atributos no antigo anterior, clique aqui para ler.

O atributo que poderemos usar tanto na TAG UL como na OL é o atributo type.

Vamos ver como os types para listas UL. Ou seja, nas listas não ordenadas, os types são 3, disc, circle, square, veja abaixo o exemplo.

Agora veja como ficou nossa lista após executar nosso código no navegador:

Agora vou te passar um EXERCÍCIO para você fazer no seu editor de código. Pegue essa mesma lista e altere-a para uma lista ordenada. E então altere o atributo para esses types: “1”, “A”, “I”, “a”, “i”.

Depois desse exercício comente aqui nesse artigo o seu resultado.

Introdução às Tabelas em HTML5

Quando estamos construindo uma página da web em HTML, algumas informações ficam bem organizadas em formato de tabelas, como listas de preços, horários, ou dados em geral. Criar uma tabela em HTML é fácil e ajuda bastante a manter o conteúdo organizado visualmente.

Estrutura Básica da Tabela

Uma tabela básica em HTML5 começa com a tag <table>. Dentro dela, usamos a tag <tr> (table row) para criar linhas e <td> (table data) para as células de dados de cada linha. Podemos também adicionar um cabeçalho usando a tag <th> (table header) para destacar os títulos das colunas, deixando a tabela mais clara.

Aqui vai um exemplo de como isso fica na prática:

Nesse exemplo, a primeira linha (<tr>) contém os títulos das colunas (Nome, Idade, e País) com a tag <th>, enquanto as outras linhas usam a tag <td> para mostrar os dados de cada pessoa.

Agora escreva esse código no seu editor de código-fonte, por exemplo, VS Code depois salve e abra-o no navegador. Você verá uma tabela.

Você pode adicionar atributos na sua <table> para melhorar a aparência e o layout da tabela. Por exemplo, o atributo border="1" adiciona bordas às células da tabela, deixando tudo mais organizado visualmente. O atributo cellpadding controla o espaço dentro de cada célula, enquanto cellspacing ajusta o espaço entre as células. Com esses atributos, é possível criar uma tabela mais estilosa e fácil de ler.

Portanto, no seu código-fonte faça as seguintes alterações conforme meu código abaixo:

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>País</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
    <td>Brasil</td>
  </tr>
</table>

Neste artigo você aprendeu sobre listas UL e OL e também sobre tabelas table em HTML 5. Espero que tenha gostado da postagem. Continue estudando e principalmente praticando, assim aprenderá tudo que ensinei neste artigo, boa sorte.

Então fico por aqui até mais.