Search this site

Web Page Layout

With HTML, you can layout information on the page using the list and table elements. This lesson describes the basics of these elements.

Lists
Lists can be defined as ordered <ol> or unordered <ul>. Ordered lists are displayed with numbers by default, while unordered lists are displayed with bullet items. With either type of list, the elements of the list are defined with list items <li>.

Here's an example:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Because it is an ordered list, it will appear as:
  1. Coffee
  2. Tea
  3. Milk
With unordered lists, you can use an attribute to specify the bullet type. Remember, attributes are entered within the start tag of the element, as with the following sample:

<ul type=circle>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

This example is from the w3c tutorials: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_lists. Click on this link and you can use the tutorial to try out variations of the list elements.

Tables
Here's an example of a table in HTML:
Here's the code for it:

<table width="200" border="1">
    <tr>
        <th>Average</th>
       <th>Home runs</th>
       <th>RBI</th>
    </tr>
    <tr>
       <td>.323</td>
       <td>16</td>
       <td>83</td>
    </tr>
    <tr>
       <td>.295</td>
       <td>45</td>
       <td>112</td>
    </tr>
    <tr>
       <td>.233</td>
       <td>5</td>
       <td>45</td>
   </tr>
</table>

A table element consists of table-row elements (<tr>). Each row consists of either table header elements (<th>), or table data elements (<td>)

In the sample, the entire table is given a width attribute of 200. You can also set the width for each column using pixels (e.g., 200) or percentages (e.g., 33% for 3 equally sized columns).

In-Class Assignment: Create a table of size 2x2 with pictures of your four favorite presidents. Each picture should have a caption.

Recent site activity