Web Design/Lists and Tables

Web Design → Lists and Tables

This page is part of the Web Design project.

While HTML is primarily concerned with semantic formatting of the content of a document, and less concerned with its style, there are situations where the meaning of some text is denoted by its presentation. Tables are widely used to organize the text visually on the screen, showing a relationship of some kind and demonstrating the meaning of the text. This activity will:

Familiarize you with tables and lists in html.

It will be assumed you:

Can identify HTML elements, attributes and their values.

This activity is not designed to:

Give a comprehensive list of elements, attributes or their accepted values.
Discuss document type, the meta element, or comments.

Lists

HTML allows you to easily set apart lists from the rest of your content with one of three different list types: Unordered (bulleted), ordered (numbered) and definition lists. Different kinds of lists can be nested to form an outline.

Unordered List

The unordered, or bulleted, list is formed using two elements. The list itself is defined using an unordered list element, and each item is marked using a list item element:

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

Item
Item
Item

Ordered List

The ordered, or numbered, list is formed similarly to the unordered list using an ordered list element and the list item element from before. The ordered list element also has a handy start attribute that allows you to set a starting number other than 1.

  <ol>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>

Item
Item
Item

Definition List

The definition list is a slight departure from the two. While it uses an opening and closing definition list element similarly, it has two different elements for the items in the list. The first is the term element for the definition list and the second is the definition element for the definition list.

  <dl>
    <dt>Item</dt>
      <dd>The item's definition.</dd>
    <dt>Item</dt>
      <dd>The item's definition.</dd>
  </dl>

Item: The item's definition.
Item: The item's definition.

Try it!

Let's try making this simple outline using nested lists. Try to duplicate these results without peeking at my source below.

Get mail.
Shop for office supplies.
- Printer paper.
- Toner.
Deliver mail and supplies.

Here is one way to reproduce this list:

  <ol start="2">
    <li>Get mail.</li>
    <li>Shop for office supplies.</li>
      <ul>
        <li>Printer paper.</li>
        <li>Toner.</li>
      </ul>
    <li>Deliver mail and supplies.</li>
  </ol>

Tables

In HTML tables are set up similarly to lists, but are rendered differently and can be confusing early on. Tables are built using a number of elements. The table is first defined by the table element, then each row is defined by a table row element, and finally each cell within each row is defined by a table cell. There are additional elements that can be used to define tables, but some are not fully supported.

  <table>
    <tr>
      <td>Data cell.</td>
      <td>Data cell.</td>
    </tr>
    <tr>
      <td>Data cell.</td>
      <td>Data cell.</td>
    </tr>
  </table>

Try it!

Open up your text editor and type the above table example. Save it as 'table.html' and open it in your web browser.

A table generally 'shrinks' to fit its contents, but the width attribute allows you to specify either a number of pixels or a percentage of the are the table is in as the width.

  <table width="100">    - specifies that the table is 100 pixels wide.
  <table width="80%">    - specifies that the table is 80% of the space in which it resides.

You may also want to have more control over the border. The border attribute specifies the width of the border in pixels. The Setting the border attribute to 0 will 'turn off' the border.

  <table border="0">     - will display no border.
  <table border="2">     - will display a border that is two pixels wide.

Try it!

Let's open up our 'table.html' and alter our table a bit.

  <html>
    <head>
      <title>Table Example</title>
    </head>
    <body>
      <table width="80%" border="3" bgcolor="#ffff00">
        <tr>
          <td>Top left.</td>
          <td>Top right.</td>
        </tr>
        <tr>
          <td>Lower left.</td>
          <td>Lower right.</td>
        </tr>
      </table>
    </body>
  </html>

Save and refresh your browser. You should notice several things. The table takes up 80% of the page in width, the border is noticeably thick and has a 3D beveled appearance, and the background of the table is yellow. The background color attribute will accept either hex values or the name of some colors. To finish this activity, make it a three by three table and give the center-most cell a green background.

Top left.	Top middle.	Top right.
Middle left.	Center.	Middle right.
Lower left.	Lower middle.	Lower right.

And this is how I did it:

  <html>
    <head>
      <title>Table Example</title>
    </head>
    <body>
      <table width="80%" border="3" bgcolor="#ffff00">
        <tr>
          <td>Top left.</td>
          <td>Top middle.</td>
          <td>Top right.</td>
        </tr>
        <tr>
          <td>Middle left.</td>
          <td bgcolor="#00ff00">Center.</td>
          <td>Middle right.</td>
        </tr>
        <tr>
          <td>Lower left.</td>
          <td>Lower middle.</td>
          <td>Lower right.</td>
        </tr>
      </table>
    </body>
  </html>