Todo sobre las listas ordenadas

Seguimos con el estudio de otro tipo de listas: Las listas ordenadas.

El día de hoy se seguirá mostrando un poco sobre el control en el HTML y se continua aprendiendo sobre las listas de HTML, con la cual hacer estructuras atractivas para mostrar la información. En el en artículo anterior se explicó sobre las listas desordenadas y ahora se va a estudiar las listas ordenadas.

Listas ordenadas

Las listas ordenadas trabajan asimismo para mostrar información, en distintos elementos o items, con la peculiaridad de que éstos estarán predichos de un número o una letra para enumerarlos, todo el tiempo por un orden.

Para elaborar las listas ordenadas se usaran las etiquetas <ol> (ordered list) y su cierre. Todo elemento será de igual manera señalado por la etiqueta <li>, que ya tuvimos la oportunidad de presenciar en las listas desordenadas.

Se coloca el siguiente ejemplo:

<p>Normas de conducta en el trabajo</p>
<ol>
<li>El jefe todo el tiempo posee la razón
<li>En caso de duda emplear norma 1
</ol>

El resultado es:

Normas de conducta en el trabajo

1. El jefe todo el tiempo posee la razón
2. En caso de duda emplear norma 1

De la misma forma que para las listas desordenadas, las listas ordenadas brindan la posibilidad de cambiar el estilo. En definitica, nos es viable detallar el tipo de numeración practicante eligiendo entre números (1, 2, 3…), letras (a, b, c…) y sus mayúsculas (A, B, C,…) y números romanos en sus versiones mayúsculas (I, II, III,…) y minúsculas (i, ii, iii,…). Para hacer dicha selección se ha de manejar, como para el caso antecedente, el atributo type, el cual será colocado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son:

1 Para establecer por números
a Por letras del alfabeto
A Por letras mayúsculas del alfabeto
i Organización por números romanos en minúsculas
I Organización por números romanos en mayúsculas

Se recuerda que en varios navegadores no marcha de forma adecuada la opción de modificar el tipo de viñeta a enseñar.

Puede que en algún caso se desee empezar una enumeración por un número o letra que no logra por qué ser precisamente el principal de todos. Para solventar este contexto, se puede manejar un segundo atributo, start, que poseerá como valor un número. Este número, que por defecto es 1, incumbe al valor a partir del cual se comienza a concretar vuestra lista. Para el caso de las letras o los números romanos, el navegador se apodera y hace la traducción del número a la letra conveniente.

Os colgamos un ejemplo empleando este tipo de atributos:

<p>Se ordena por números</p>
<ol type=”1″>
<li>Elemento 1
<li> Elemento 2
</ol>

<p>Se ordena por letras</p>
<ol type=”a”>
<li>Elemento a
<li> Elemento b
</ol>

<p>Se ordena por números romanos comenzando por el 10</p>

<ol type=”i” start=”10″>
<li>Elemento x
<li> Elemento xi
</ol>

El resultado:

Se ordena por números

1. Elemento 1
2. Elemento 2

Se ordena por letras

1. Elemento a
2. Elemento b

Se ordena por números romanos comenzando por el 10

1. Elemento x
2. Elemento xi