Tables and Forms
Tables & Forms give your site a large degree of interactivity. They allow one to respond or apply for a job over the internet, rather than E-mail.
Before HTML tags for tables were finalized, authors had to
carefully format their tabular information
within <PRE> tags, counting spaces and previewing their
output. Tables are very useful for
presentation of tabular information as well as a boon to creative
HTML authors who use the table
tags to present their regular Web pages. (Check out the NCSA home
page for an excellent example
of using tables to control page layout.)
Think of your tabular information in light of the coding
explained below. A table has heads where you
explain what the columns/rows include, rows for information,
cells for each item. In the following
table, the first column contains the header information, each row
explains an HTML table tag, and
each cell contains a paired tag or an explanation of the tag's
function.
Table Elements
Element
Description
<TABLE> ... </TABLE>
defines a table in HTML. If the BORDER attribute is
present, your browser displays the table with a border.
<CAPTION> ...
</CAPTION>
defines the caption for the title of the table. The default
position of the title is centered at the top of the table. The
attribute ALIGN=BOTTOM can be used to position the
caption below the table.
NOTE: Any kind of markup tag can be used in the
caption.
<TR> ... </TR>
specifies a table row within a table. You may define
default attributes for the entire row: ALIGN (LEFT, CENTER,
RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table
Attributes at the end of this table for more information.
<TH> ... </TH>
defines a table header cell. By default the text in this cell
is bold and centered. Table header cells may contain
other attributes to determine the characteristics of the
cell and/or its contents. See Table Attributes at the end
of this table for more information.
<TD> ... </TD>
defines a table data cell. By default the text in this cell is
aligned left and centered vertically. Table data cells may
contain other attributes to determine the characteristics
of the cell and/or its contents. See Table Attributes at the
end of this table for more information.
Table Attributes
NOTE: Attributes defined within <TH> ... </TH> or
<TD> ... </TD> cells override the
default alignment set in a <TR> ... </TR>.
Attribute
Description
ALIGN (LEFT, CENTER, RIGHT)
Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM)
Vertical alignment of a cell.
COLSPAN=n
The number (n) of columns a cell spans.
ROWSPAN=n
The number (n) of rows a cell spans.
NOWRAP
Turn off word wrapping within a cell.
General Table Format
The general format of a table looks like this:
<TABLE>
<!-- start of table definition -->
<CAPTION> caption contents </CAPTION>
<!-- caption definition -->
<TR>
<!-- start of header row definition -->
<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR>
<!-- end of header row definition -->
<TR>
<!-- start of first row definition -->
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR>
<!-- end of first row definition -->
<TR>
<!-- start of last row definition -->
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR>
<!-- end of last row definition -->
</TABLE>
<!-- end of table definition -->
You can cut-and-paste the above code into your own HTML
documents, adding new rows or cells as
necessary. The above example looks like this when rendered in a
browser.
The <TABLE> and </TABLE> tags must surround the
entire table definition. The first item inside the
table is the CAPTION, which is optional. Then you can have any
number of rows defined by the <TR>
and </TR> tags. Within a row you can have any number of
cells defined by the <TD>...</TD> or
<TH>...</TH> tags. Each row of a table is,
essentially, formatted independently of the rows above and
below it. This lets you easily display tables like the one above
with a single cell, such as Table
Attributes, spanning columns of the table.
Tables for Nontabular Information
Some HTML authors use tables to present nontabular information.
For example, because links can
be included in table cells, some authors use a table with no
borders to create "one" image from
separate images. Browsers that can display tables properly show
the various images seamlessly,
making the created image seem like an image map (one image with
hyperlinked quadrants).
Using table borders with images can create an impressive display
as well. Experiment and see what
you like.
Fill-out Forms
Web forms let a reader return information to a Web server for
some action. For example, suppose
you collect names and email addresses so you can email some
information to people who request
it. For each person who enters his or her name and address, you
need some information to be sent
and the respondent's particulars added to a data base.
This processing of incoming data is usually handled by a script
or program written in Perl or another
language that manipulates text, files, and information. If you
cannot write a program or script for your
incoming information, you need to find someone who can do this
for you.
The forms themselves are not hard to code. They follow the same
constructs as other HTML tags.
What could be difficult is the program or script that takes the
information submitted in a form and
processes it. Because of the need for specialized scripts to
handle the incoming form information,
fill-out forms are not discussed in this primer. Check the
Additional Online Reference section for
more information.