|
 |
|
| BACK TO TOP |
|
While the HTML shown in the examples below may look formidable, by using the table creation aids available in most HTML editors, including Web Edit and Homesite, the job of creating the table is greatly simplified.With the aid of a pop-up in the editor, you can specify the number of rows and columns you desire and can fill in data for each of the cells. When done with this step, all the basic TABLE, TR (table row) and TD (table data) tags are created for you. You can then edit the table to add additional text, create lists in individual cells, specify alignment, spacing, and text attributes (bold, italics, color, etc.). You can also insert images (by including the IMG SRC="file_name" tag) as you desire.
HINT:You can enhance the border of tables when using a background image by setting the background color (BGCOLOR=) in the BODY tag. If an image is specified, it will override the background color, but the browser will choose a color for the borders (and horizontal rules) that will contrast with the the color specified. In this way, you can get borders to show up better against your background (here I set BGCOLOR="Olive", causing the borders to show up better against the light yellow pattern of my backgrounds).
| QUICK REFERENCE: | Align Text in Columns | Indent Text (left margin) | Tables Inside Tables | Setting Table borders | Creating Colored Borders |
The following HTML is used to create the tables below. BORDER=0 is used for the right table. The table will automatically assign enough space to accommodate the height and width of the graphics and text in any row or column.
<TABLE BORDER=1>
<TR> <!-- First row -->
<TD ALIGN=CENTER><IMG SRC="green.gif" WIDTH=14 HEIGHT=14 BORDER=0 ></TD>
<TD>Image to the left, borders turned on</TD>
</TR>
<TR> <!-- Second row -->
<TD ALIGN=CENTER><IMG SRC="camera.gif" WIDTH=32 HEIGHT=32 BORDER=0 ></TD>
<TD> Another image</TD>
</TR>
</TABLE>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Image to the left, borders turned on
Another image
Image to the left, borders turned off
Another image
BACK TO TOP
Some versions of Netscape will not display the width of the first (empty) column correctly. You need to put something in the column to make sure it fills the full width you want. An easy way to do this is to use a transparent pixel. Using the WIDTH= parameter in the image tag, you can make the pixel as wide as needed. I have displayed dot_clear.gif (which is actually a 1x1 pixel transparent image) as 10x10 image with a border. Just right click on it and select "Save Image As" to create a copy on your PC. You can then use this image to create a space anywhere on your page. Here is dot.clear.gif
<TABLE BORDER=0>
<!-- Table will be the full page width -->
<CAPTION>
<FONT COLOR="Red">Table to create left margin (this is the table header)</FONT>
</CAPTION>
<TR>
<TD WIDTH=150> </TD> <!-- Sets first column width to 150 pixels, about 25% of table width -->
<TD BGCOLOR="White">
<!-- This defines the second column. All the page text goes in here.-->
<H3>This is a header ....</H3>
What follows is a list of things about tables.<P>
<OL>
<LI>Table data can ....
<LI>Table data represents ....
<LI>Table rows can contain ....
<LI>Table data in any row ....
<LI>Images or text may be ....
</OL>
</TD> <!-- This is the end of the second column. -->
</TR>
</TABLE>
This line starts at the left margin of the page, preceding the table statements below. If you were using tables to format your page for a background that had a left border, then you could put your links in the left column (or leave it empty, like this example, skipping over the border. The rest of your page at the right, with all your text, images, and other tables within the right column, similar to the example below. If you have a background with a left border, you put all your normal page content inside this block of the table.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| |
This is a header for the text that follows.What follows is a list of things about tables.
|
| BACK TO TOP |
Here we have a table that is three columns wide by three rows long, without the borders showing.
In it we have a smaller five column by three row table, with borders, that spans the last two columns of the larger table.
Here is the HTML to create the following tables.
<TABLE BORDER=0> <!-- The Big Table -->
<TR> <!-- First row of the table-->
<TD>Tables are fun</TD>
<TD> </TD>
<TD>Tables are quite useful</TD>
</TR>
<TR> <!-- Second row of the table-->
<TD> </TD>
<TD>Tables are the best way<BR>to lay out a page in an<BR>ordered manner.</TD>
<TD> </TD>
</TR>
<TR> <!-- Third row of the table-->
<TD> </TD> <!-- First column of third row is empty -->
<TD COLSPAN=2> <!-- This data spans across two columns -->
<TABLE BORDER=1> <!-- The small table is here -->
<TR>
<TD WIDTH=100>Number of<BR>cells</TD> <!-- First column is 100 pixels wide -->
<TD>Cols = 1</TD>
<TD>Cols = 2</TD>
<TD>Cols = 3</TD>
<TD>Cols = 4</TD>
</TR>
<TR>
<TD>Rows = 1</TD>
<TD ALIGN=CENTER>1</TD> <!-- ALIGN=CENTER centers the text in the cell -->
<TD ALIGN=CENTER>2</TD>
<TD ALIGN=CENTER>3</TD>
<TD ALIGN=CENTER>4</TD></TR>
<TR>
<TD>Rows = 2</TD>
<TD ALIGN=CENTER>2</TD>
<TD ALIGN=CENTER>4</TD>
<TD ALIGN=CENTER>6</TD>
<TD ALIGN=CENTER>8</TD>
</TR>
</TABLE> <!-- The small table ends here -->
</TD>
</TR>
</TABLE> <!-- The big table ends here -->
And here is what you see with the HTML shown. By using tables, you can place text or images wherever you want them on the page. What is shown is a table with BORDER=0 to make text and another table appear on the page where we want it to be.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tables are fun
Tables are quite useful
Tables are the best way
to lay out a page in an
ordered manner.
Number of
cellsCols = 1
Cols = 2
Cols = 3
Cols = 4
Rows = 1
1
2
3
4
Rows = 2
2
4
6
8
| BACK TO TOP |
Sometimes, you will want to include a border to show the separation of the fields in a table. Simply setting the border to one (BORDER=1) will draw a simple line around all cells. But, by varying the BORDER size, as well as the CELLSPACING value, you can achieve different effects. A table with a single cell (one row and one column) can be used with a wide border to "frame" some text or graphics.
| Table with BORDER=1 and CELLSPACING=0 | Table with BORDER=6 and CELLSPACING=1 | Table with BORDER=6 and CELLSPACING=6 | Single cell Table with BORDER=8 to frame picture |
|||||||||||||||||||||||||||||||||||||
|
|
|
|
| BACK TO TOP |
Colored borders (only visible with Netscape 3.0 or Internet Explorer 3.0 or higher) can be made by embedding a table within a cell of a larger table. With the later browsers you can set the colors as you desire.
At the top I created a single cell table with a red background. I then added a single cell table within the cell of the red table. I set the inner table background to yellow to give the effect shown. You can view the source of this page to see how this is done.
| BACK TO TOP |
Send mail to Jim at hansonj@usa.net
Copyright © 1998 Jim Hanson
This page was created with Homesite
Most recent revision April 3, 1998
Get your own Free Home Page