Busca

Carregando...

terça-feira, 5 de agosto de 2008

Como criar listas numeradas

HTML está para a blogosfera assim como o inglês está para o mundo, todos sabem que precisam aprender, mas são poucos os que se lembram de estudar. Pensando nisso, resolvi voltar a escrever posts sobre a linguagem para ir ensinando em doses homeopáticas e não traumatizar ninguém.

Este post eu resolvi fazer porque tenho visto na web (não apenas em blogs) muitas listas numeradas sendo criadas "na unha", assim:

1. Arroz<BR>
2. Feijão<BR>
3. Carne<br>
4. Batata<br>
6. Beterraba<br>
7. Alface<BR>
9. Limão<br>
10. Leite

Os problemas de se criar uma lista assim:

  • Estético - Somente os números ficam alinhados, as linhas de texto não.
  • Cansativo - Você tem que digitar número por número, correndo maior risco de errar (observe que no exemplo acima pulei os ítens 5 e 8).
  • Refazer - Se você errar/pular/excluir algum ítem terá que fazer toda a lista novamente.

O jeito ideal de se fazer uma lista numerada é:

Código Resultado
<ol>
<li> Arroz
<li> Feij&atilde;o
<li> Carne
<li> Batata
<li> Beterraba
<li> Alface
<li> Limão
<li> Leite
</ol>
  1. Arroz
  2. Feijão
  3. Carne
  4. Batata
  5. Beterraba
  6. Alface
  7. Limão
  8. Leite

Numa lista numerada, você pode utilizar os seguintes atributos dentro da tag <ol>:

start
Como mostrado no exemplo acima, start serve para indicar de qual valor a lista deve começar. Se você não colocar, a lista começa do padrão, que é, obviamente, 1.
<ol start='99'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
type
Se você não quiser usar a numeração padrão, que é em algarismos arábicos, também pode escolher outra.
Alfabeto
maiúsculo
<ol type='A'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
Alfabeto
minúsculo
<ol type='a'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
Números
romanos
maiúsculos
<ol type='I'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista
Números
romanos
minúsculos
<ol type='i'>
<li>Exemplo</li>
<li>de lista</li>
</ol>
  1. Exemplo
  2. de lista

Leia também:

Posts relacionados