Chapter 52. Building Lists


In HTML, there are two kinds of lists: ordered (or numbered) lists and unordered (or bulleted) lists. The markup for a list begins with either the ol or ul tag for ordered and unordered lists, respectively, followed by a series of li tags for each item in the list. See Figure 52.1 for examples of both types of lists.

Listing 52.1. View Source for Figure 52.1.
 <table>   <tr>     <td> <!-- Ordered list begins here -->       <ol>         <li>First item</li>         <li>Second item</li>         <li>Third item</li>         <li>Fourth item</li>         <li>Fifth item</li>       </ol> <!-- Ordered list ends here -->     </td>     <td> <!-- Unordered list begins here -->       <ul>         <li>First item</li>         <li>Second item</li>         <li>Third item</li>         <li>Fourth item</li>         <li>Fifth item</li>       </ul> <!-- Unordered list ends here -->     </td>   </tr>  </table> 

Figure 52.1. In HTML, you get ordered (numbered) and unordered (bulleted) lists. The markup is the same, except for the list tag.


As you can see, the HTML code for the lists is exactly the same, with the exception of the list tag. Therefore, changing an ordered list to an unordered list is a simple matter of changing the ul tag to an ol tag.

Notice also that you don't have to type the numbers in an ordered list. The browser keeps track of them for you and displays them automatically.

In a surprise turn of events for the topics in this section, HTML gives you a number of handy attributes for controlling list appearance. Table 52.1 summarizes them.

Table 52.1. HTML List Attributes

ATTRIBUTE

APPLIES TO

CONTROLS

POSSIBLE VALUES

EXAMPLES

type

ol

The leading character

A (capitalized alphabetical), a (lowercase alphabetical), (capitalized Roman numeral), (lowercase Roman numeral), (decimal)

<ol type="A">

<ol type="i">

type

ul

The shape of the bullet

circle (hollow), disc (solid), square

<ul type="circle">

<ul type="square">

Start

ol

The starting number or letter in the list

Any numeric[*]

<ol start="4">


[*] In ordered lists other than standard decimal numbered lists, the start attribute indicates the nth value in the sequence. So an alphabetical list with a start value of 4 begins with the letter D, since D is the fourth letter of the alphabet. Likewise, a list with Roman numerals begins with X (ten) when the start value equals 10.



Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net