Ordered or Numbered Lists

You have seen several examples of lists, particularly in the home page. Lists are either numbered, called out by bullets, or simply indented. A numbered, or ordered, list is started with the tag <OL>. Each entry in the list must be preceded by an item tag, which for ordered and unordered lists is <LI>. A good programming practice is to place the opening and closing tags, like <OL> and </OL> on separate lines. The item tag <LI>, like the paragraph tag <P> does not have to be closed; and it may be on the same line as the text that follows it. Putting tags on separate lines can be very important in making lists, since their structure can quickly become very difficult to visualize.

Unordered or Bullet Lists

If you wish to make a list with bullets, use an unordered list. The syntax is the same as for ordered lists, except that the opening and closing are denoted by <UL> and </UL>. An example of an unordered list can again be found in the main index, where the subheadings are unnumbered. The subheading list for this lesson is:

  <UL>
    <LI><A HREF="tut_list.htm#OL">Ordered
      Lists</A>
    <LI><A HREF="tut_list.htm#UL">Un-Ordered
      Lists</A>
    <LI><A HREF="tut_list.htm#NEST">Nested
      Lists</A>
    <LI><A HREF="tut_list.htm#DL">Definition
      Lists</A>
    <LI><A HREF="tut_list.htm#TABLES">Tables</A>
  </UL>

Each item is preceded by a bullet or dot, depending on the browser you are using.

Nested Lists

The two types of lists above may be concatenated to obtain a nested list, with one list inside another. You must keep track of where each section and subsection of a nested list begins and ends, or you can get into a hopeless mess. This time, let's replace the ordered outer list with an unordered list:

  <UL>
  <LI>Bullet Item 1
  <LI>Bullet Item 2
  <LI>Ordered Lists
    <OL>
    <LI>Numbered Item 1
    <LI>Numbered Item 2
      <OL>
      <LI>Numbered Item Sub Item 1
      <LI>Numbered Item Sub Item 2
        <OL>
        <LI>Numbered Item Subsub Item 1
        <LI>Numbered Item Subsub Item 2
        </OL>
      </OL>
    </OL>
  <LI>Un-Ordered Lists
  <UL>
  <LI>Bullet Sub Item 1
  <LI>Bullet Sub Item 2
    <UL>
    <LI>Bullet Subsub Item 1
    <LI>Bullet Subsub Item 2
      </UL>
    </UL>
  <LI>Mixed Lists
    <OL>
    <LI>Numbered Item 1
      <UL>
      <LI>Bullet Sub Item 1
        <OL>
        <LI>Numbered Sub Item 1
        <UL>
        <LI>Bullet Subsub Item 1
        </UL>
      </OL>
    </UL>
  </OL>
</UL>

Here is where it really pays to put everything on a separate line where we can keep track of each item. (I've found that some browsers have a minor bug, that requires that the each item be indented no more than the list definition tag.) If we have done it right, the result should be a very complex nested list:

• Bullet Item 1
• Bullet Item 2
• Ordered Lists
  1. Numbered Item 1
  2. Numbered Item 2
     1. Numbered Item Sub Item 1
     2. Numbered Item Sub Item 2
• Un-Ordered Lists
  • Bullet Sub Item 1
  • Bullet Sub Item 2
    • Bullet Subsub Item 1
    • Bullet Subsub Item 2
• Mixed Lists
  1. Numbered Item 1
     • Bullet Sub Item 1
       1. Numbered Sub Item 1
          • Bullet Subsub Item 1

For bullet lists the browser keeps track of the levels, provided each list has been closed properly with </OL>, so there is a different type of bullet for each level. The default types are usually solid circle or Type=Disk, open circle or Type=Circle, and solid square or Type=Square For numbered lists many browsers simply insert the same style of numbers at all levels. For nested numbered lists, one must insert a type attribute after the list definition tag OL. For the following list the level types are Type=I, Type=A, Type=1, Type=i, and Type=a, respectively. In each case the type represents the first number in the list:

1. First item
   
2. Second item
   
3. Embedded list with capital letters
   
   1. First item
      
   2. Second item
      
   3. Embedded list with arabic numerals
      
      1. First item
         
      2. Second item
         
      3. Embedded list with small roman numerals
         
         1. First item
            
         2. Second item
            
         3. Embedded list with lower case letters
            
            1. First item
               
            2. Second item
               
            3. Third item
               
      4. Fourth item
         
   4. Fourth item
      
4. Fourth item
   

Of course one can combine different types of lists in a nest. One might, for example, use a ordered list for the highest level and unordered lists for the lower levels. However to prevent the browser from becoming confused it may be necessary to specify the types Disk, Circle, and Square if there are bullets of several different ranks.

Definition Lists

Tables

Tables are similar to lists, except that they must be formatted so the entries lie in rows and columns. Tables can be simple or extremely complex. They require special codes for captions, headers, borders, and all elements. Since you are probably impatient to get on to graphics and the fun stuff, let's just do a table by example; you can easily figure out what each tag does; note the tags <TR> for each row, <TH> for headers, and <TD> for data cells.

First we set up a simple table, with three rows and three columns.

  <TABLE>
    <CAPTION><BIG>Fresh
    resources</BIG></CAPTION>
    <!--First row-->
    <TR>
      <!--Headers-->
      <TH>Fruit</TH>
      <TH>In Basket</TH>
      <TH>In Pantry</TH>
    </TR>
    <TR>
      <!--Data: first row-->
      <TD>Apples</TD>
      <TD>3</TD>
      <TD>2</TD>
    </TR>
    <TR>
      <!--Data: second row-->
      <TD>Oranges</TD>
      <TD>1</TD>
      <TD>5</TD>
    </TR>
    <TR>
      <!--Data: third row-->
      <TD>Bananas</TD>
      <TD>4</TD>
      <TD>2</TD>
    </TR>
  </TABLE>

Displayed, we have

Fresh resources

Fruit	In Basket	In Pantry
Apples	3	2
Oranges	1	5
Bananas	4	2

The resulting table is rather plain, and could do with some extensive reformatting. We can add a border and some padding between the cells. The <TABLE> tag has several attributes, such as BORDER=8, CELLPADDING=10, CELLSPACING=5, and BGCOLOR="#FFFFDF".

Each cell can have attributes related to color and alignment. The alignment attributes are ALIGN=LEFT, ALIGN=CENTER, and ALIGN=RIGHT attributes

Fresh resources

Fruit	In Basket	In Pantry
Apples	3	2
Oranges	1	5
Bananas	4	2

You get the idea. If you look at the source, you will see, besides the specifications for the border, a tag <WIDTH=120>. WIDTH and HEIGHT tags are useful for constraining the sizes of the cells. The numbers represent the sizes in pixels on the screen display. If followed by a percent sign, they represent the sizes in percent of the browser window. Unfortunately table creation within HTML is still rather tedious. We hope that it will soon become easy to construct tables with dynamic entry of data; so the values in the table can change from day to day.