Designing and Building Course-Based Webs

[Introduction] [Handouts] [Basics] [HTML] [First Page] [Design] [Markup] [More HTML] [Searching] [References] [Process] [Terminology] [Tips] [HTML Guide] [Books] [Bookmarks] [Tools]


Advanced HTML

Abstract: This document provides an introduction to some more advanced features of HTML, including tables and forms.


Tables

The original design of HTML emphasized text, rather than data. As such, it made it difficult to present organized data, which are usually grouped in tables. Fortunately, the HTML community has developed a set of standards for organizing data into tables.

The current standard is imperfect, but usable. In it, a table is segmented into rows, and the individual rows are segmented into cells.

Most browsers are fairly friendly about laying out tables. They generally expand and shrink cells to fit the accompanying data. At times, you may want to insert a non-breaking space ( ) into an empty table cell to change the appearance.

Tables Illustrated

Here's a sample table.
Logical vs. Physical Layout
TagLogicalPhysical
<P> X
<strong> X
<it> X
<hr> ? ?

Here's the corresponding source for that table.

<table border>
<tr><th colspan="3">Logical vs. Physical Layout</th></tr>
<tr><th>Tag</th><th>Logical</th><th>Physical</th></tr>
<tr>
  <td><code>&lt;P&gt;</code></td>
  <td align="center">X</td>
  <td align="center"> </td> </tr>
<tr>
  <td><code>&lt;strong&gt;</code></td>
  <td align="center">X</td>
  <td align="center"> </td> </tr>
<tr>
  <td><code>&lt;it&gt;</code></td>
  <td align="center"> </td>
  <td align="center">X</td> </tr>
<tr>
  <td><code>&lt;hr&gt;</code></td>
  <td align="center">?</td>
  <td align="center">?</td> </tr>
</table>

Clearly, tables are hard to write and read, whch leads many people to develop them with WYSIWYG tools. However, with careful alignment of your HTML, you can make your tables easier to create by hand.


Layout Using Tables

Many page designers use tables to produce more attractive pages. For example, I produce the boxed sample code with the following HTML

<blockquote>
<table border width="75%"><tr><td>
<pre>
...
</pre>
</td></tr></table>

Layout in multiple columns

You can also use tables to produce the standard layout of "two columns: a narrow column at the left with the table of contents or set of links, a wide column at the right with the main information. The code for that might look something like

<table>
<tr>
  <td></td> <!-- A blank cell in the left column -->
  <td><h1>A Sample Page</h1><hr></td> <!-- Document title -->
</tr>
<tr>
  <td width="90" valign="top"> <!-- The table of contents -->
    <a href="index.html">Home</a> <br>
    <a href="intro.html">Introduction</a> <br>
    <a href="design.html">Design</a> <br>
    <a href="ref.html">References</a>
  </td>
  <td valign="top"> <!-- The real body
  <P>This is a sample HTML document in two-column format.  In
  the left column you'll see the table of contents.  In this
  column is the "body" of the document.</P>
  <P>You might also use this strategy to provide side-notes
  or other elements of modern page design.</P>
  <P>You should note that these multi-column pages are
  particularly difficult for screen readers (the programs
  used by the visually impaired to read text) to read, as
  they don't notice the columns and instead read straight
  across the screen.</P>
  </td>
</tr>
</table>

This code produces the following table

A Sample Page
Home
Introduction
Design
References