Apresentando dados com listas e tabelas

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:

Imagem do navegador apresentando uma lista ordenada onde contém dados das maiores cidades do Brasil, em população

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:

imagem de lista ordenada apresentando dados das maiores cidades do Brasil, em população

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:

Imagem mostrando como fica a lista ordenada utilizando a propriedade CSS lower-alpha

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:

Imagem mostrando como fica a lista ordenada utilizando a propriedade CSS lower-greek

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:

Imagem mostrando como fica a lista ordenada utilizando a propriedade CSS lower-roman

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:

Imagem representando uma lista não ordenada HTML

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:

Imagem mostrando como fica a lista não ordenada utilizando a propriedade CSS circle

list-style: square - Ao declararmos essa propriedade, o layout da nossa lista não ordenada ficará dessa forma:

Imagem mostrando como fica a lista não ordenada utilizando a propriedade CSS square

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 curso

Tags 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:

imagem mostrando uma tabela HTML

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.