Full Page for Printing

Tables

<PRE>...</PRE>
<TABLE>. . .</TABLE>
<TABLE attributes>
<TABLE> as "Top-of-Page" Menu
Images in a <TABLE>
The idea for the <TABLE>. . .</TABLE> container tag pair flows straight from one of the original purposes of the Web -- presentation of scientific data in a manner organized to allow visual statistical analysis. A true table reminds the viewer of a spreadsheet: rows (lines) across the page and columns down the page. Entries in each column are flush left to each other.

A Simple <PRE>...</PRE> Container Table: The earliest HTML table is structured using preformatted text. The Web site developer types the information exactly as it is to appear on the screen -- white-spacing as if it were to be word-processed rather than displayed on a browser. Then, the <PRE> tag is placed ahead of the data, and the slash </PRE> tag after the data. Notice the following example:

<PRE>
This is the first column second column third column
this is line 2second column-line2third column-line 2
this is line 3column 2-line 3column 3-line 3
</PRE>

The above code displays as follows: 

This is the first column      second column          third column
this is line 2                second column-line2    third column-line 2
this is line 3                column 2-line 3        column 3-line 3
The difficulty with <PRE> containers lies in the spacing of the table elements. They need to be typed in a fixed, non-proportional font -- such as Courier, Fox Print, or Letter Gothic, one of the "typewriter" fonts -- so that the developer can "see" the correct spacing and columns. Notice that the display reflects the "Fixed" font set by the user in the Options, Preferences, Font choices in the browser.

<PRE> allows for a WIDTH="__" attribute which defines and limits the width, in pixels, of the text display. This is inserted as <PRE WIDTH="__"> in the tag.

<PRE> as Text Format: While designers generally think of using <PRE> to create preformatted tables -- with data organized in rows and columns as above -- <PRE> could also be used to create ASCII text designs such as the following: 

           o  o  o   o .  .   .
         o 
        o                                  ___
       ||_____ ==== /^^^\___  __o_o__  ____| |__
     >(________|14| |_monon_|(_MCCSC_) |_______|
     _/oo OOOOO oo`- oo   oo`- oo  oo`- oo   oo
---------------------------------------------------------
Remember, however, that all preformatted text -- whether organized as a table or "organized" as a design -- must be typed in a "fixed," non-proportional font, in order to be able to visualize the placement of spaces and characters.
Back to...TOP Back to...Designing Web Pages
True HTML <TABLE>s: Continuing with the idea that any table is the equivalent of a spreadsheet, the <TABLE>. . .</TABLE> container pair creates cells into which data is placed. Cells are the area created by intersecting rows and columns. On the other hand, the preformatted text <PRE>. . .</PRE> pair tells the browser to display the data "as typed," whether in rows, columns, or in a design around the window. <PRE> can "simulate" a table or a train, only the <TABLE>. . .</TABLE> container pair can create an actual table.

<TABLE> uses three main markup tags: <TD>...</TD> for table data; <TR> for the end of a table row; and <TH>...</TH> for internal table headings. <TR> is an empty tag, while the others are containers.

The following code for a simple 3x3 table...

<TABLE>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH><TR>
<TD>Row 1-Column 1</TD>
<TD>Row 1-Column 2</TD>
<TD>Row 1-Column 3</TD><TR>
<TD>Row 2-Column 1</TD>
<TD>Row 2-Column 2</TD>
<TD>Row 2-Column 3</TD><TR>
<TD>Row 3-Column 1</TD>
<TD>Row 3-Column 2</TD>
<TD>Row 3-Column 3</TD><TR>
</TABLE>

...produces the following display:
Column 1Column 2Column 3
Row 1-Column 1Row 1-Column 2Row 1-Column 3
Row 2-Column 1Row 2-Column 2Row 2-Column 3
Row 3-Column 1Row 3-Column 2Row 3-Column 3

Notice that the <TD>...</TD> pair creates each cell, or content box.

Back to...TOP Back to...Designing Web Pages
<TABLE attributes>: The <TABLE> tag allows the use of several attributes or commands within the brackets which offer rendering hints to the reading browser.
<TABLE BORDER="1"> draws a single line border around both the table and the cells.
In this, and in the following attributes, increase the weight of the border (or these attributes) with progressively larger numbers.
<TABLE ALIGN="center" or "right"> aligns the entire table to the commanded portion of the display.
<TABLE CELLSPACING="3"> "thickens" the space between the cells. In conjunction with a BORDER= attribute, this can be displayed as a thicker line.
<TABLE CELLPADDING="3"> puts uniform space within a cell, that is, between the contents and the edge of the cell.
The <TD> and <TH> tags allow for both ALIGN="__" and VALIGN="__" attributes within the brackets.
<TD ALIGN="right"> would right justify the contents of the cell. The other ALIGN arguments are "center" and "left" (the default). The default for <TH> is "center". Use "left" and "right" to vary the position of <TH> elements.
<TD VALIGN="top"> would vertically align the cell contents to the top of the cell. The other VALIGN arguments are "middle" (the default) and "bottom".
The <TD> and <TH> tags allow three interesting attributes that begin to suggest ways to use tables for more than just data.
<TD COLSPAN="2"> or <TH COLSPAN="2"> allow the contents of the cell to "span" across 2 columns without a column break.
<TH ROWSPAN="2"> or <TD ROWSPAN="2">, on the other hand, allows the cell contents to "span" down, making the cell 2 rows deep.
Either number can be changed to reflect the actual number of rows or columns in the design of the table.
<TH...> and <TD BGCOLOR="#rrggbb"> will "color" the background of the designated cell in later versions of both major browsers. If the browser does not recognize "BGCOLOR," the display will default to the <BODY BGCOLOR="#rrggbb"> attribute. Therefore, test this feature and be careful of combining the <TD ...> attribute with a <FONT COLOR="#rrggbb"> attribute. The text may wash out!
rrggbb Hex Numbers for 16 Colors
To achieve the desired color, replace "#rrggbb" in each attribute argument with "#" and the six (6) characters on the color.
This cell is colored "light grey" and aligned right:
<TD BGCOLOR="#C0C0C0" ALIGN="right">
-- "cee-zero, cee-zero, cee-zero."

Let's add some attributes to the table created above.

<TABLE BORDER="2" CELLPADDING="3">
<TH COLSPAN="4">Columns</TH><TR>
<TH ROWSPAN="5">Rows</TH><TR>
<TH>Column 1</TH>
<TH BGCOLOR="#00FFFF">Column 2</TH>
<TH>Column 3</TH><TR>
<TD>Row 1-Column 1</TD>
<TD>Row 1-Column 2</TD>
<TD>Row 1-Column 3</TD><TR>
<TD BGCOLOR="#0000FF">Row 2-Column 1</TD>
<TD>Row 2-Column 2</TD>
<TD>Row 2-Column 3</TD><TR>
<TD>Row 3-Column 1</TD>
<TD>Row 3-Column 2</TD>
<TD BGCOLOR="#FF00FF">Row 3-Column 3</TD><TR>
</TABLE>

Notice that more than one attribute can be added within the tags.

Columns
Rows
Column 1Column 2Column 3
Row 1-Column 1Row 1-Column 2Row 1-Column 3
Row 2-Column 1Row 2-Column 2Row 2-Column 3
Row 3-Column 1Row 3-Column 2Row 3-Column 3

Ups and Downs: Here's where this gets real exciting and real depressing!

Depressing: Some browsers, including text-only browsers, do not support the <TABLE> tag at all; some of the strangest and most unreadable displays can be created on the graphical Netscape 1.0 or the text browser Lynx with <TABLE> tags. Always make a text-only browser part of your Web page testing process.

Exciting: Any HTML element -- heading, text, images, links, and/or combination of these -- can be placed inside a <TD> cell.

Back to...TOP Back to...Designing Web Pages
<TABLE> as "Top-of-Page" Menu: As a graphical design element -- as opposed to pure structure elements -- the <TABLE> pair allows creative placement of anchors and links at the top of the Web page in a simulated table-of-contents or menu structure. This design -- and it is possible, with short menus, without using <TABLE> at all -- clearly presents the contents of the Web site up front, reducing the amount of scrolling that the user has to go through.

Essentially, the designer creates a <TABLE> with enough cells to hold all the content anchors. For example, nine anchors could be organized into a 3x3 <TABLE> or into a 3x4 <TABLE> with empty cells which create white space in the design.

Searching the Internet
 Libraries and Research
Designing Web Pages
 Evolution of the Web Site
The Web around Here
 Fun and Games
Connecting School Subjects:
 The Learning Oasis
The Education Station
English and Language Arts
Math and Science
World Cultures and Language
This table once served as the menu for MCCSC: Getting Started on the Web. For illustration purposes, a BORDER attribute has been included to show the cells. The designer decided that eleven (11) anchors would be enclosed in seven (7) cells: six in a 2x3 structure and five in a single cell; the eighth cell would contain descriptive bold text.

This is the HTML code for the above menu. For more information on the structure tags included in the example, see Text Formats for <STRONG> and Anchors and Links for<A HREF="__" > structures.

<TABLE cellspacing=2 cellpadding=3>
<TD><a href="in-srch1.html"><STRONG>Searching the Internet</STRONG></A>
</TD><TD><A HREF="edres-st.html#THREE"><STRONG>Libraries and Research</STRONG></A>
</TD><TR><TD><http://www.mccsc.edu/samples/i-concep.html"><STRONG>Designing Web Pages</STRONG></A>
</TD><TD><A HREF="mccscweb.html"><STRONG>Evolution of the Web Site</STRONG></A><TR><TD><A HREF="edres-st.html#TWO"><STRONG>The Web around Here</STRONG></A>
</TD><TD><A HREF="edres-st.html#SEVEN"><STRONG>Fun and Games</STRONG></A>
</TD><TR><TD><STRONG>Connecting School Subjects:</STRONG>
<TD><a href="http://www.pierian.com/"><strong>The Learning Oasis</strong></a><;BR>
<A HREF="http://www.digicity.com/edusub.htm"><B>The Education Station</B></A><BR>
<A HREF="edres-st.html#SIX"><STRONG>English and Language Arts</STRONG></A><br>
<A HREF="edres-st.html#FIVE"><STRONG>Math and Science</STRONG></A><br>
<A HREF="edres-st.html#FOUR"><STRONG>World Cultures and Language</STRONG></A></TD><TR>
</TABLE>
Back to...TOP Back to...Designing Web Pages

Ideas mccscNet
MCCSC: Designing Web Pages contains both text and links in the <TABLE> menu structure. It is also possible to insert images into a cell. The following small table uses two of the MCCSC toolbar images to demonstrate that structure. Both of these are "clickable" images. For more information, see Images.
Back to...TOP Back to...Designing Web Pages
Last modified: 22 February 1998
Comments and/or Questions? Carl Zager: czager@mccsc.edu