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> ... </TABLE>
defines a table in HTML. If the BORDER attribute is
present, your browser displays the table with a border.
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
<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.
NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the
default alignment set in a <TR> ... </TR>.
ALIGN (LEFT, CENTER, RIGHT)
Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM)
Vertical alignment of a cell.
The number (n) of columns a cell spans.
The number (n) of rows a cell spans.
Turn off word wrapping within a cell.
General Table Format
The general format of a table looks like this:
<!-- start of table definition -->
<CAPTION> caption contents </CAPTION>
<!-- caption definition -->
<!-- start of header row definition -->
<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
<!-- end of header row definition -->
<!-- start of first row definition -->
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
<!-- end of first row definition -->
<!-- start of last row definition -->
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
<!-- end of last row definition -->
<!-- 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
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