OBJECTIVE

• Create ordered (numbered) and unordered (no numbers) lists
• Create tables and use as table of contents

DISCUSSION

• Are NOT numbered
• Displays a circle by default
• Can set style using: style = "list-style-type: square"
  • Can also set list-style-type to: circle, none,...
• Create an unordered list as follows:

    <ul>
       <li>The first item</li>
       <li>The second item</li>
    </ul>
    

Ordered Lists

• Are numbered
• Can set style using: style = "list-style-type: lower-alpha"
  • Can also set list-style-type to: lower-roman, upper-alpha...
• Create an ordered list as follows:

    <ol>
       <li>The first item</li>
       <li>The second item</li>
    </ol>
    

Tables

• Often used to structure a page. 
  • For example use to divide page into table of contents and main body
• Heading tags <th>
• Row tags <tr>
• Attributes to change appearance of a table. 
  • width, cellspacing, cellpadding,...
• Style properties.  Examples...
  • style = "border-bottom-style: groove"
    • or double, inset, none, outset, ridge, or solid
  • style = "border-right-color:Gray"
  • style = "border-top-width: thick"
    • or thin or medium
  • style = "background-color: silver"
  • style = "border-left: .75pt solid gray" 
• Can use "border" instead of "border-right", etc...
• Create a table as follows:

        <table border = "10" width = "50%" align = "center" cellSpacing="5" cellPadding="10">
            <tr><th>Heading is</th><th>optional</th></tr>
            <tr><td width = "30%">r1, c1</td><td width = "70%">r1, c2</td></tr>
            <tr><td style = "border: 3pt groove yellow">r2, c1</td><td>r2, c2</td></tr>
        </table>
    

EXERCISES

1. Create a numbered (ordered) list that meets the following:
   1. It has 3 main items which are numbered 1 to 3
   2. It has a sub-list under item 2 that has two items labelled "a" and "b".  Use a list for these sub-items.
2. Create a table that meets the following:
   1. It has a header and 2 rows and 3 columns
   2. It is centered on the page
   3. It completely fills up the width of the page
   4. Each column is 1/3 of the total width of the table
   5. It has a thick border around the outside of the table
   6. The center cells have thick red borders
   7. One of the cells has a red background
3. Create a page that will meet the following requirements:
   1. Has a table of contents down the left side.
   2. Has three "buttons" across top to provide links within the page.  Make sure that each button takes up 1/3 of the total width of the page area (neglecting the left contents portion.
   3. Your page should look like the one shown below. 

LINKS AND HELP