6. Listas e tabelas em HTML

As listas e tabelas em HTML são ferramentas essenciais para a organização de informações em um site. Elas permitem a apresentação de dados de maneira estruturada e fácil de entender, o que pode melhorar significativamente a experiência do usuário. Este capítulo do nosso e-book irá abordar esses dois elementos em detalhes para ajudá-lo a se tornar um desenvolvedor Front End eficiente.

Listas em HTML

Em HTML, temos três tipos principais de listas: listas ordenadas, listas não ordenadas e listas de definição.

Listas Ordenadas

As listas ordenadas são usadas quando a ordem dos itens é importante. Elas são criadas usando a tag <ol>. Cada item da lista é colocado dentro de uma tag <li>. Veja o exemplo abaixo:

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

Listas Não Ordenadas

As listas não ordenadas são usadas quando a ordem dos itens não importa. Elas são criadas usando a tag <ul>. Assim como nas listas ordenadas, cada item é colocado dentro de uma tag <li>. Veja o exemplo:

<ul>
  <li>Item</li>
  <li>Outro item</li>
  <li>Mais um item</li>
</ul>

Listas de Definição

As listas de definição são usadas para listar termos e suas definições. Elas são criadas usando as tags <dl>, <dt> (para o termo) e <dd> (para a definição). Veja o exemplo:

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação usada para estruturar conteúdos na web.</dd>
  <dt>CSS</dt>
  <dd>Linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML.</dd>
</dl>

Tabelas em HTML

As tabelas são usadas para apresentar dados em linhas e colunas. Elas são criadas usando várias tags, incluindo <table> (para criar a tabela), <tr> (para criar uma linha), <td> (para criar uma célula) e <th> (para criar um cabeçalho de tabela).

Veja um exemplo de como criar uma tabela em HTML:

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
</table>

Além dessas tags básicas, existem várias outras tags e atributos que você pode usar para controlar a aparência e o comportamento de suas tabelas. Por exemplo, você pode usar a tag <caption> para adicionar um título à sua tabela, a tag <colgroup> para especificar propriedades para várias colunas de uma vez, e o atributo 'colspan' para fazer uma célula ocupar várias colunas.

Esperamos que este capítulo tenha lhe dado uma boa compreensão de como usar listas e tabelas em HTML. Lembre-se de que a prática é a chave para se tornar um desenvolvedor Front End eficiente, então não deixe de experimentar o que você aprendeu em seus próprios projetos. No próximo capítulo, vamos explorar o CSS, a linguagem que usamos para estilizar nossos sites e torná-los visualmente atraentes.

Próxima página do Ebook Gratuito:

42Formulários e inputs em HTML

4 minutos