Week 4 Lab Notes - Tables & Images

Link Bar

Many of you have doubtless visited Websites that have a nifty little colored bar along one side of the page, which show links to other sites or other sections in the documents. This is how it's done:

Document Formatting
Colored Sections
Navigation Bars
Callout Boxes

Callout Box

This is how you make a cute little callout box which you can fit in a column along the side of your page. Note the center-alignment of the title.

Tonight's lab treats the topics of Tables and Images. As you read over these notes, I encourage you to look at the HTML source to see how the various formats were accomplished.


Tables are one of the most useful and flexible of the markups specified in the HTML standard. In addition to the obvious spreadsheet-like tables that you see occasionally, tables can be used to cut up your document into smaller pieces, make colored sections, "navigation bars", and callout boxes.

Please refer also to the section on tables in the HTML 4.0 docs from W3C (this is section 11 in the table of contents).

In your report you will be required to use tables somewhere. Hopefully, these notes will give you some ideas on where and how you can creatively use tables.

Document Formatting

As you can already see, the whole of this document (with the exception of the title) is formatted as one large table with a single row and two cells. The left-hand cell is the link-bar and the right-hand cell is the content of this page.

Colored Sections

Another use for tables is to give color to a specific section. This makes your text stand out and can offset it slightly. What you see before you are two, nested tables of a single row/cell each with different backgroud colors.

Navigation Bars

A popular use for tables is to make a navagation bar which contains links (somewhat similar in concept to the link-bar idea).

Document Formatting Colored Sections Navigation Bars Callout Boxes Spreadsheet

Callout Boxes

Yet another use for tables is to make little callout boxes which have a title and some text. These are commonly found in columns on the side of the page. Have a look at this little box over to your left for an idea.


Lastly, there is the classic spreadsheet look for tables. The standard defines a number of tags that you can use to define headers, make cells span more than one row, make cells span more than one column, and so forth.

Year Humidity Recorder
1960 10.2 Jones
1970 12.0 Lopez
1980 9.1 Kasparov
1990 11.8 Schikedanz


Part of the title of this course is the word "Multimedia" so let's discuss a few mult-med items here.

You may also refer to the section "Objects, Imaegs, and Applets in the W3C docs, especially the sections on the IMG tag, which gives you information on specifying attributes for images, and the section entitled Visual Presentation of Images, which tells you how to specify borders, whitespace, alternate text, and the like. You will also find information here on how to make image maps, which we will probably not cover in the lab.

Alternate Text

The IMG tag contains an attribute called alt for specifying alternate text. In graphical browsers, this text will pop up in a little yellow window when you fly the mouse over the image. In non-graphical browsers, this text will be displayed in place of the image. It is considered courteous to supply alternate text.

Example: Rest the mouse pointer over this image: The World Wide Web Consortium Logo

Sizing Images

The height and width of an image can be specified by supplying pixel or percentage values to attributes by the same name.

Previous example resized: The RESIZED World Wide Web Consortium Logo

Positioning Images

Images can be positioned using the align

Linked Images

Just like text, images can be surrounded with <a href="JUMP"> and </a> tags to make them clickable. Consider the following example:

Click on this image to jump to the HTML 4.0 validator: validator image

Note that unless overridden, linked images are displayed with a border which changes colors when clicked.