back to previous page
   BACK
HTML for Dummies
Tables
and
  • LISTS
  • of
  • things
  •  
    Next we learn the power of lists and tables. But first, something important - how to put hidden comments into your HTML code!

    1. Comments

    If you're making a complex webpage, it's vital that you have some way of saying what you've done. Okay, you could have a file at home where you meticulously document how the page is put together, but you and I both know that even if you were obsessive enough to create such a file, it would get lost!

    <!--Rather put terse comments in your HTML text->

    Yep. That's how you insert comments. A left angle bracket, immediately followed by an exclamation mark and two minus signs. To close off, a single minus and a right angle bracket. <!--For symmetry, I usually waste space by closing my comments thus -->

    We are informed that the new, official way of specifying comments is with the <comment> tag, closing things off with </comment>. This is verbose, slightly silly, and let's face it, nobody in their right mind is going to sit down and alter all the billions of web pages that contain the 'old-fashioned' format.

    2. Lists

    Lists are a little less complex than tables. There are two types:
    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:


    <!-- an ordered list ->
    <ol>
            <li> First item
            <li> Second item
            <li> Third item
    </ol>


    And an unordered one:


    <ul>
            <li> item
            <li> item
            <li> item
    </ul>


    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

    There are a few ways you can customise an ordered list. The two instructions that you include in the <ol> tag are:

    1.         type="1"

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

    2.         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

    There is relatively little you can do with these. One thing you can do is to change the 'bullet' (otherwise known as a dingbat!) that is used to indicate the start of each item. You use the type tag. There are only a few options -
    • 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

    There are other ways of listing things, for example using the <menu> and <dir> tags (with their corresponding closing tags). These are seldom if ever used. Even more obscure is the <dl> definition or 'glossary' list, which contains the tags <dt> or 'definition term' and <dd> which we assume means 'definition datum'. Avoid.

    3. Tables

    We're going to simply show you how to use tables. (We're going to cheat to make things even more simple than you expect!)

    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:


    <table border="5">
        <tr>
            <td> Column1 </td>
            <td> Column2 </td>
            <td> Column3 </td>
        </tr>
        <tr>
            <td> Row2 Col1 </td>
            <td> Row2 Col2 </td>
            <td> Row2 Col3 </td>
        </tr>
    </table>


    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

    Saying how wide a table is easy - but there are a few traps. Conventionally we measure the size of most images in pixels (picture elements). The problem with this is that screen sizes differ - you are most probably viewing this web page in 800 by 600 pixel resolution, but others may view the same page in 640 by 480 or even 1024 by 768. The golden rule (ignored by many helpful web-designing tools) is:

    Specify all sizes apart from image sizes
    using relative measures!

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

    <table width="90%">

    Likewise, we can specify the size of individual cells.

    This cell is 30% wide This cell is 20% wide This cell is 50% wide

    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

    Moving a table around on the screen is generally fairly easy (once you've practised a bit)! You can:
    • 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..)


    <table width="100%" height="100%" border="1">
      <tr><td align="center" valign="middle">
      <table border="7">
        <tr>
          <td>Now change your screen resolution to e.g. 1024 x 768</td>
        </tr>
      </table>
      </td></tr>
    </table>


    Note how the inner table is centred both vertically and horizontally on the screen, regardless of the screen resolution. A cute trick that seems to work in most browsers. This is just the start - experiment with nested tables, making very sure that you close all your tags appropriately!

    Merging rows and columns

    Take our prototype table and amend it:


    <table border="5">
        <tr>
            <td colspan="2"> Column1 </td>
            <td rowspan="2"> Column3 </td>
        </tr>
        <tr>
            <td> Column1 </td>
            <td> Column2 </td>
        </tr>
    </table>


    Note how you get the following..

    Column1 Column3
    Row2 Col1 Row2 Col2

    In other words, the first two columns of the top row have been merged to make a single column of double the width - the colspan instruction does this. Similarly rowspan merges the stated number of rows. Easy once you get to know it (although sometimes behaviour is not quite what you expect!) Notice how we left out column two (of the first row) as column1 spreads over where it should be, and we likewise left out column 3 of row 2, as it's taken up by the bloated column3 of row one.

    Frills

    Above we gave you the bare bones. It's surprising what you can do with the above basics, a good idea, and obsessively remembering to close off all tags appropriately. Some of the following table-related attributes will also be of use:

    Prettying up Tables
    (don't use this table as an example, it's ugly!)
    This is a caption for the above table
    This is a heading cell And so is this
    Tag What it means
    <caption> Provides a caption for the table. The caption can precede the table (align="top", the default) or be directly below it (align="bottom"). This table has a caption - look just below the end of the table. Close with the </caption> Hmm - I personally avoid such captions.
    <th> Defines a column header. Personally, I'm wicked, and simply use <td>, prettying up the contents with italics or whatever. The table you're looking at has two heading cells above the two real (<td>) column headers. Remember to close your heading cells with </th>. Microsoft has even defined its own <thead>, <tbody> and <tfoot> tags, and a whole bunch of other proprietary tags - studiously avoid them!
    <table> Okay, we've already encountered this important tag, but there are a whole lot of attributes that are worth knowing. Certain browsers may not support some of the following. Attributes include:

      cellspacing specifies the spacing betweencells;

      cellpadding gives the amount of white space inside a cell (surrouding its contents). Zero is a good number for both padding and spacing!

      bgcolor="#FFCCCC" Will change cell background colour, in this case to a sort of salmon pink.

       

    <tr> AND <td> The attributes discussed apply to both of the specified tags. Most browsers will buy them.

    align="right" (or "left" or "center") Specifies alignment of cell contents.

    valign="bottom" (or "baseline" or "middle"; or "top" for the <td> tag only)
    Similarly

    bgcolor="#CCFFCC" Will change cell background colour, here to an ugly greenish colour.

    nowrap Prevents wrapping of the entire cell contents no matter what else happens!

    Note that there are several other attributes, mostly Micro$oft-defined. One rather attractive MS-defined attribute is:

    bordercolor Which specifies the colour of the cell borders. Unfortunately not supported by Netscape. (If you're using an MS browser, the border of this cell should be in red)

    MS also allows a variety of other options, including specifying a background image for each cell, which we would consider cute were we not irrationally biased against MS!

    Finally, a few more frills, AND an infinite resource of web-page ideas
    (and how to get your page on the web)!

    Web page author jvs@anaesthetist.com Date of last update: 2001/9/29