Web Design Table of Contents by Arnold Kling
Lists and Tables

In this lesson, we cover two additional types of HTML formatting: lists and tables. Then we will be finished with plain HTML formatting, until we move into CSS.

Lists

There are two kinds of lists. Unordered lists--<ul>--create bullet points, without numbers. Ordered lists--<ol>--create numbered lists. If you view the source code for these lectures, you will see that I use these formatting tags.

You use a <ul> tag to open up an unordered list. Then, you insert a list item tag--<li>--in front of each item on the list. Below is a list of some of my favorite rock artists. Try coming up with your own list.

  1. In notepad, create a new page. Enter code that looks like this:

    <html>
    <head>
    <title>
    Lists and Tables
    </title>
    </head>
    <body>
    <p>
    Here are some of my favorite rock artists:
    <ul>

    <li>
    Clive Gregson

    </li>

    <li>
    Indigo Girls

    </li>

    <li>
    Neil Young

    </li>
    </ul>
    </p>
    </body>
    </html>

  2. After you type in a bulleted list of your favorite rock artists, try changing the <ul></ul> tags to <ol> and </ol>. What happens to the bullets?

    Note that it is very important to have the closing </ul> tag at the end. Otherwise, any text that you put in after your list will be displayed strangely by the browser.

    Note that it is a good idea when you type your code to indent the <li> tags. That way, it is easy to understand the code on your page in order to make additions and corrections. Remember, the white space from your indentation will be ignored by the browser.

    Tables

    A table arranges elements into rows and columns. The table uses three types of tags.

    1. <table></table> starts and ends the table.
    2. <tr></tr> is used to start and end each row of the table.
    3. <td></td> or <th></th> are used to start and end each entry in the table. <th> stands for "table header" and is used to set off headings for columns or rows.

    For example, you might put your class schedule in the form of a table. The table will have three columns--the class period, the name of the class, and the teacher. If you had seven classes, there would be seven rows. Here is an example with two rows,plus a header row.

    <table>
    <tr>

    <th>Period</th>

    <th>Class</th>

    <th>Teacher</th>
    </tr>
    <tr>

    <td>4th</td>

    <td>AP Calculus</td>

    <td>Raucher</td>
    </tr>
    <tr>

    <td>5th</td>

    <td>AP Statistics</td>

    <td>Kling</td>
    </tr>
    </table>

    This code produces a very plain table. We will learn how to add background colors and borders when we get to CSS.

    Table of Contents | Next Lecture
    Page created by Arnold Kling. Last Modified July 18, 2001.