1. unordered lists; and
2. ordered ones.

They both have similar properties:

• As you expect they have opening and closing tags that are similar;
• They are both made up of list items, whose tag is <li>
• Closing the list item with the </li> tag closure is 'optional' but you really should do so (Guilty confession: I hardly ever do!).

See how we cunningly used both types of list above. Here's how to write them:

And an unordered one:

Notice that we were naughty. We didn't close off our list items!. This may seem trivial, but some fancy HTML editors will choke if you fail to do so! (We admit, we've often been guilty, cough).

Also notice how we indented the list items when we wrote our HTML code. This is not a requirement of syntax, simply a bloody good idea. You should almost always indent nested items, to make the HTML legible. (Needless to say, if you then import your painstakingly hand-crafted HTML into something like FrontPage, it will obliterate all your careful formatting, imposing its own, but this is what we have come to expect ).

Prettying up ordered lists

12.         type="1"

    where "1" (a 'one', not an 'ell') can be replaced by "A", "a", "I" or "i", and

13.         start="12"

    which indicates the item to start with. Above, we used type="i" and start="12" just to give you a feel for how this works. Note how even if you are using say type="A" you must still specify a numeric value for start.

Prettying up unordered lists

• type="disc"
• type="circle"
• type="square"

Most browsers seem to accept the type= command within the <ul> tag and, surprisingly, also within the <li> tag. An alternative to the type="circle" instruction is type="round".

Other lists - fine print

3. Tables

You won't be surprised to find that the tags to start and end a table are simply <table> and </table>. You only need two other tags to create a table - these are <tr> (which starts a table row) and <td> which creates a table 'datum' within a row. It's very important that you close these two tags in the correct order, especially with Netscape, which is rather unforgiving.

Armed with this knowledge, let's create a table with three columns and two rows:

Try the above example: it should appear as:

Column1	Column2	Column3
Row2 Col1	Row2 Col2	Row2 Col3

This is our prototype table. Note how every <td> has a corresponding closure, and how there are three <td>'s (corresponding to the three columns) for each <tr>. Each <tr> likewise has a closure.

Try experimenting a bit - especially with Netscape. You'll often find that leaving out a single table or row closure can muck things up completely, even to the point of leaving the whole screen blank when you try to view an html page!

Also note that we have kept things very simple, with just three tags and their closures. There are several more tags that you might use, but just these three are sufficient to make a decent table!

See how the table size is sufficient to contain the information in each <td> element, and also note:

• The border="5" command within the <table> tag that gives our table a substantial border;
• How by default the table is left-aligned on the screen.

Both of the above can be overwritten - in fact, you can also specify the exact size of the table. Note that if you specify border="0", or indeed if you leave out the border tag, a table has no border. This is extremely useful for positioning things on the screen, and creating whitespace!

Specifying sizes

How do we specify relative measures? Easy, as a percentage. For example we might say:

Likewise, we can specify the size of individual cells.

Note that in the above, the width is relative to the width of the table, NOT the total width of the screen. Browsers are usually quite smart in correcting for your inability to make numbers add up to 100%. Generally if you specify different column widths in different rows, the first row will take precedence.

Also note that if you leave a cell without any contents, many browsers will treat it slightly differently from the others (for example, ignore it, inappropriately diminish it, or draw it slightly differently). Prevent this irritating behaviour by putting in an &nbsp;.

Positioning the table on the screen

• Surround the whole table with a <div align="center"> .. </div> pair of tags; or
• Put a table within ANOTHER table!

This idea of nested tables (although frowned upon by many designers, and poorly supported by editors such as FrontPage) is actually very powerful, and gives you great control over the look & feel of your page. Try the following (putting it at the start of a new html document, ie <html><head></head><body> followed by this code..)

Note how you get the following..

Column1		Column3
Row2 Col1	Row2 Col2