Advanced HTML

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

Tables

Tables Illustrated

Layout Using Tables

Layout in multiple columns

Programming Languages
Forms

Forms Illustrated

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.

You mark a table is <table>...</table>
- You can make the table a fixed with with the parameter width="pixels"
- You can set the tables width to a percentage of the page width with width="percentage%"
- You can add a border around cells with border
- See the reference materials for other possibilites.

You mark a row in the table with <tr>...</tr>

You mark a cell in the table with <td>...</td>

You mark a heading cell in the table with <th>...</th>

Both rows and cells allow you to change alignment
- You can set the horizontal alignment with align="..." (left, center, right)
- You can set the vertical alignment with valign="..." (top, middle, bottom)

You can also make a cell span multiple rows or columns with colspan="..." and rowspan="..."

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

Tag Logical Physical

<P> X

<strong> X

<it> X

<hr> ? ?

Logical vs. Physical Layout
Tag	Logical	Physical
`<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