News:

This week IPhone 15 Pro winner is karn
You can be too a winner! Become the top poster of the week and win valuable prizes.  More details are You are not allowed to view links. Register or Login 

Main Menu

HTML ordered lists - cool HTMl tips

Started by ben2ong2, October 03, 2006, 06:18:08 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

ben2ong2

Here is a cool HTML tip for ordered lists created using <OL> HTML tag.

The TYPE attribute of <OL> list determines which kind of bullet will be used for listing elements.

We can use three types of bullets for the <OL> lists - Alphabet, Roman numerals and numbers/digits.
Take a look at the code below:

<OL TYPE="1">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</OL>
The TYPE attribute has been set to 1, Arabic numerals (digits). This is the default and you don't need to specify it.
The above code is rendered in a browser as:

Item 1
Item 2
Item 3
To change the bullets to roman numerals, the TYPE attribute needs to be set to i (lowercase alphabet i) or I (uppercase alphabet I). Let us check these out.

<OL TYPE="i">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
<LI>Item 6</LI>
<LI>Item 7</LI>
<LI>Item 8</LI>
<LI>Item 9</LI>
<LI>Item 10</LI>
<LI>Item 11</LI>
</OL>
<OL TYPE="I">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
<LI>Item 6</LI>
<LI>Item 7</LI>
<LI>Item 8</LI>
<LI>Item 9</LI>
<LI>Item 10</LI>
<LI>Item 11</LI>
</OL>

Is rendered as:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11

Is rendered as:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11

Another attribute, though you may not encounter it often, is START. It takes a number as value and this specifies the number (or alphabet) with which the list would start.

<OL TYPE="1" START="4">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</OL>
is rendered as:

Item 1
Item 2
Item 3


<OL TYPE="A" START="10">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</OL>
is displayed as:

Item 1
Item 2
Item 3



You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login