Abstract: This document provides an introduction to some more advanced features of HTML, including tables and forms.
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.
align="..."(left, center, right)
valign="..."(top, middle, bottom)
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.
Logical vs. Physical Layout Tag Logical Physical
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><P></code></td> <td align="center">X</td> <td align="center"> </td> </tr> <tr> <td><code><strong></code></td> <td align="center">X</td> <td align="center"> </td> </tr> <tr> <td><code><it></code></td> <td align="center"> </td> <td align="center">X</td> </tr> <tr> <td><code><hr></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.
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>
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