Listas e tabelas são muito presentes no mundo dos Desenvolvedores Front-end, devido a sua facilidade de manipulação, objetividade e opções de estilizações. Podemos trabalhar com elas de diversas formas, neste artigo, iremos aprender como apresentar dados com listas e tabelas HTML.
Listas HTML
Primeiramente, as listas HTML são ideais para apresentar informações em formato de itens numerados ou não numerados. Existem dois tipos de listas que podemos utilizar para o desenvolvimento do nosso projeto, sendo elas, as listas ordenadas, e as listas não ordenadas.
Listas Ordenadas
Em princípio, as listas ordenadas são representadas pela tag <ol>, utilizamos ela quando queremos apresentar dados sequenciais, como por exemplo, as maiores cidade do Brasil, por população.
Para apresentar esses dados, iremos utilizar duas tags, a primeira como já mencionada, <ol>, com ela iremos indicar o uso de lista ordenada, já para a criação dos dados, utilizaremos a tag <li>, que irá representar cada item da nossa lista. Vejamos o breve exemplo a seguir.
Curso HTML5 + CSS3 - Formulários
Conhecer o curso<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>São Paulo - 12,2 milhões de habitantes.</li>
<li>Rio de Janeiro - 6,7 milhões de habitantes.</li>
<li>Brasília - 3 milhões de habitantes.</li>
<li>Salvador - 2,8 milhões de habitantes.</li>
</ol>
</body>
</html>
Como resultado, no navegador será renderizado da seguinte forma:
Opções de estilizações de listas ordenadas
Além disso, existe a possibilidade de estilizarmos o modo que será representado a nossa lista ordenada, através do CSS, utilizando a propriedade list-style. Esta propriedade nos da algumas opções de estilização, sendo elas:
-
list-style: decimal - Sendo o padrão que já conhecemos, apresentando dados com os números 1, 2, 3, 4 e assim por diante.
-
list-style: decimal-leading-zero - Ao declararmos essa propriedade, o layout dos números da nossa lista irá acrescentar um zero antes do número representado pelo ítem, dessa forma:
- list-style: lower-alpha - Ao declararmos essa propriedade, o layout dos números da nossa lista irá ficar com as letras do alfabeto, seguindo a sequência dos itens presentes na nossa lista:
- list-style: lower-greek - Ao declararmos essa propriedade, o layout dos números da nossa lista irá ficar com as letras do alfabeto Grego, seguindo a sequência dos itens presentes na nossa lista:
- list-style: lower-roman - Ao declararmos essa propriedade, o layout dos números da nossa lista irá ficar com as letras do alfabeto Romano, seguindo a sequência dos itens presentes na nossa lista:
Listas Não Ordenadas
Em segundo lugar, temos as listas não ordenadas, sendo representada pela tag <ul>, ela é muito útil quando queremos listar ou apresentar dados não sequenciais, como por exemplo, compras que serão feitas na feira.
Vejamos o breve exemplo a seguir.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>Banana</li>
<li>Maçã</li>
<li>Abacaxi</li>
<li>Melancia</li>
</ul>
</body>
</html>
Como resultado, no navegador será renderizado da seguinte forma:
Opções de estilizações de listas não ordenadas
As opções que nós temos para estilizarmos nossa lista não ordenada, são as seguintes:
-
list-style: disc - Sendo o padrão que já conhecemos, apresentando dados com os círculos pretos.
-
list-style: circle - Ao declararmos essa propriedade, o layout da nossa lista não ordenada ficará dessa forma:
- list-style: square - Ao declararmos essa propriedade, o layout da nossa lista não ordenada ficará dessa forma:
Por fim, nós temos a declaração de list-style: none;, que irá servir tanto para as listas não ordenadas, quanto para as listas ordenadas, retirando números e símbolos, deixando apenas o ítem da lista.
Tabelas HTML
As tabelas HTML são extremamente úteis para organizar dados em formato de linhas e colunas. Elas são frequentemente utilizadas para exibir informações tabulares, como calendários, horários, preços e comparações.
Curso HTML5 + CSS3 - Fundamentos
Conhecer o cursoTags para construir uma tabela HTML
Para realizarmos a construção de uma tabela HTML, iremos utilizar uma combinação de algumas tags:
- table - A tag
<table>representa a estrura por completo da tabela HTML - thead - A tag
<thead>irá representar o cabeçalho da nossa tabela, tudo que fizer parte do cabeçalho, ficará dentro de<thead> - tr - A tag
<tr>é utilizada para definirmos uma linha dentro da tabela, cada<tr>irá representar uma linha. Porém, para conseguirmos criar essas linhas, devemos utilizar em conjunto a tag<td> - th - A tag
<th>representa o título da tabela em cada coluna do cabeçalho - tbody - A tag
<tbody>define o corpo da tabela, todas as informações/dados ficarão dentro de<tbody> - td - Para definirmos uma coluna no corpo da nossa tabela e adicionarmos informações/dados, utilizamos a tag
<td> - tfoot - A tag
<tfoot>é pouco utilizada, porém, irá representar o rodapé da tabela.
Só para exemplificar, vamos observar este código com a construção de uma tabela por completo, utilizando suas devidas tags.
<table>
<thead>
<tr>
<th>Curso</th>
<th>Instrutor</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML5 + CSS3</td>
<td>Amauri</td>
</tr>
<tr>
<td>PHP</td>
<td>Elton</td>
</tr>
<tr>
<td>Tailwind CSS</td>
<td>Rafael</td>
</tr>
<tfoot>
<tr>
<td>2023 - Todos os direitos reservados</td>
</tr>
</tfoot>
</tbody>
</table>
No navegador será renderizado dessa forma:
Conclusão
Por fim, é importante destacar a importância de testar e validar as listas e tabelas no HTML para garantir que as informações sejam apresentadas de forma clara e acessível a todos os usuários.
Caso você queira se aprofundar mais neste assunto, temos aqui na nossa plataforma um curso dedicado a listas e tabelas, o HTML5 e CSS3 - Apresentação de Dados. Caso prefira, temos um vídeo aberto no Youtube que abordam vários conceitos citados neste artigo.
