Listas e Tabelas no HTML5

As listas e tabelas são essenciais para estruturar e organizar informações de forma clara, acessível e bem definida em uma página web. Elas são amplamente usadas para menus, passos, catálogos, comparativos, grades de dados e muito mais.

Listas no HTML5

Existem três tipos principais de listas no HTML:

Listas Ordenadas (<ol>)

  • Usada quando a ordem dos itens é importante, como listas de passos, classificações, rankings ou sequências.

Sintaxe:

<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

Resultado:

  1. Primeiro item

  2. Segundo item

  3. Terceiro item

Atributos importantes do <ol>:

  • type: Define o tipo de marcador (1, A, a, I, i).

  • start: Define o número ou posição inicial.

  • reversed: Inverte a ordem, começando do final.

Exemplo com atributos:

<ol type="A" start="3">
  <li>Terceiro item (A)</li>
  <li>Quarto item (B)</li>
</ol>

Listas Não Ordenadas (<ul>)

  • Usada quando a ordem dos itens não importa, como menus, características ou itens soltos.

Sintaxe:

<ul>
  <li>Item um</li>
  <li>Item dois</li>
  <li>Item três</li>
</ul>

Resultado:

  • Item um

  • Item dois

  • Item três

Listas de Definição (<dl>, <dt>, <dd>)

  • Usada para pares de termos e descrições, como glossários ou listas de especificações.

Sintaxe:

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação para a web.</dd>

  <dt>CSS</dt>
  <dd>Folhas de estilo para definir aparência e layout.</dd>
</dl>

Resultado:

HTML
Linguagem de marcação para a web.

CSS
Folhas de estilo para definir aparência e layout.

Listas Aninhadas

Você pode combinar listas dentro de outras listas.

Exemplo:

<ol>
  <li>Item principal
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Outro item principal</li>
</ol>

Tabelas no HTML5

As tabelas são usadas para organizar dados tabulares, como planilhas, relatórios, preços, cadastros e grades de informações.

Estrutura Básica de uma Tabela

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Profissão</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>28</td>
    <td>Engenheira</td>
  </tr>
  <tr>
    <td>João</td>
    <td>34</td>
    <td>Desenvolvedor</td>
  </tr>
</table>

Descrição dos Elementos

  • <table> → Cria a tabela.

  • <tr> → Linha da tabela (table row).

  • <th> → Cabeçalho da coluna (table header), geralmente em negrito e centralizado.

  • <td> → Célula de dados (table data).

Elementos Avançados para Tabelas

  • <caption> → Título da tabela.

  • <thead> → Cabeçalho agrupado da tabela.

  • <tbody> → Corpo principal dos dados.

  • <tfoot> → Rodapé da tabela.

Exemplo completo:

<table>
  <caption>Lista de Funcionários</caption>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Setor</th>
      <th>Salário</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Maria</td>
      <td>Financeiro</td>
      <td>R$ 5.000</td>
    </tr>
    <tr>
      <td>Paulo</td>
      <td>TI</td>
      <td>R$ 7.200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Dados atualizados em Maio de 2025</td>
    </tr>
  </tfoot>
</table>

Mesclagem de Células

  • colspan: Mescla colunas.

  • rowspan: Mescla linhas.

Exemplo com colspan:

<tr>
  <td colspan="2">Informação combinada</td>
</tr>

Exemplo com rowspan:

<tr>
  <td rowspan="2">Ana</td>
  <td>Engenharia</td>
</tr>
<tr>
  <td>Financeiro</td>
</tr>

Melhores Práticas para Tabelas

  • Utilize <th> para cabeçalhos.

  • Use <caption> para descrever a tabela quando necessário.

  • Sempre que possível, utilize <thead>, <tbody> e <tfoot> para melhorar a acessibilidade e a organização.

  • Evite tabelas para layout. Use apenas para dados tabulares.

Exemplo Prático Completo de Tabela

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Tabela</title>
</head>
<body>

  <h1>Relatório de Vendas</h1>

  <table border="1">
    <caption>Vendas por Região</caption>
    <thead>
      <tr>
        <th>Região</th>
        <th>Vendedor</th>
        <th>Vendas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Sul</td>
        <td>Marcos</td>
        <td>R$ 15.000</td>
      </tr>
      <tr>
        <td>Fernanda</td>
        <td>R$ 12.500</td>
      </tr>
      <tr>
        <td>Nordeste</td>
        <td>João</td>
        <td>R$ 18.200</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Dados referentes a Maio de 2025</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

Conclusão

As listas e tabelas são elementos fundamentais do HTML, fornecendo uma maneira eficiente de organizar informações. Usar as estruturas corretamente melhora tanto a experiência do usuário quanto a legibilidade do código e a acessibilidade da página.

Próximo Passo

Agora que você domina Listas e Tabelas, o próximo módulo será sobre Links e Navegação no HTML5, onde exploraremos como criar menus, links internos, externos e âncoras para navegação eficiente em suas páginas.

Updated on
Textos e Conteúdos
Links e Navegação