Morphic Molecules Tables This page © Mona M. Everett, Ph.D., 1995
everett@txdirect.net

Member of the Internet Link Exchange

Morphic Molecules Home Page

Tables Main Page

This page shows an example of how to put images in a table. It also has examples of how to extend a cell over multiple columns, how to extend a cell over multiple rows, how to have a solid cell, and how to use headers.

Table Notes:

To retrieve an image, right click on it and choose 'Save this image as'
An image cited as a reference is bigger than shown. Click on the name citation to see the full size image.
If the source column contains a link, click on it to go to the source from which the image was obtained.

***Image Catalog***
	Image	Name	Properties		Source
1		britflwr.jpg (24 bit)	Height	128	Russ' BackgroundsThis page has a marvelous collection of backgrounds
			Width	128
			Size	11,915
2		alpha.gif (8 bit)	Height	54	Gilbert's Home PageMost of my icons come from this site.
			Width	54
			Size	803
3		clover2.gif (8 bit)	Height	150	SkywaterAnother excellent background archive.
			Width	150
			Size	26,997
4		sky2.gif (8bit)	Height	92	Russ' Backgrounds
			Width	92
			Size	6,298
5		construc.gif (8 bit)	Height	62	Gilbert's Home Page
			Width	89
			Size	1414
6		orca_pic.gif (8 bit)	Height	60	Converted from a line with an orca on it. Orca was edited. orca line
			Width	81
			Size	1,199
7		arwidg2.gif (8 bit)	Height	21	Widget designed by me.
			Width	21
			Size	933
8		delphi.gif (8 bit)	Height	139	Borland International's Delphi logo
			Width	153
			Size	3,937

Table Basics

Clicking on this symbol,

, will bring you back to this index.

Table characteristics
Putting an image in a cell
Putting a reference in a cell
Extending a cell over more than one column
Extending a cell over more than one row
Empty Cells
HTML for Image Catalog

TableCharacteristics

These Table Definition Tags define the characteristics of the table.

***Table Tags***
Starting Tag	Ending Tag	Function
<TABLE>	</TABLE>	Defines the extent of a table
<TH >	</TH >	Defines the header row of a table
<TR >	</TR >	Defines a row in a table
<TD >	</TD >	Defines a cell in a table
<CAPTION>	</CAPTION>	Defines the text of a table caption.

There are several descriptive tags which can appear
inside any of the above STARTING tags.

***Descriptive Table Tags***
Discriptive tag	Function	Example
<BORDER>	Defines width of table border. Appears only in the TABLE tag	< TABLE BORDER=2 >
<WIDTH >	Defines width of a table, row,column, or cell; Appears in any starting definition tag	< TD WIDTH=100 >
<HEIGHT >	Defines height of a table,row,column or cell;Appears in any starting definition tag	< TD HEIGHT=20 >
<CEL PADDING >	Defines the space left around objects in table cells. Appears only in TABLE tag.	< TABLE CELLPADDING=2 >
<CELLSPACING >	Defines how much room is left between cells; i.e., the thickness of the grid bars. Appears only in the TABLE tag.	< TABLE CELLSPACING=2 >
<ALIGN >	Defines how the contents of the cells are aligned horizontally. Can appear in any definition tag. It can take the values of LEFT, RIGHT, or CENTER	<TR ALIGN=LEFT >
<VALIGN >	Defines how the contents of the cells are aligned vertically. Can appear in any definition tag. It can take the values of TOP,BOTTOM, or CENTER	<TR VALIGN=CENTER >
<ROWSPAN >	Determines how many rows a cell extends across. Appears only in the TD tag	<TD ROWSPAN=2 >
<COLSPAN >	Determines how manycolumns a cell extends across. Appears only in the TD tag	<TD COLSPAN=3 >

This is a minimal table. It has one row and one column; hence there is only one cell.There is no Header Row. It uses the BORDER tag with no size. These defaults give a border size of 2, CELL PADDING of 1, and CELL SPACING of 2, ALIGN=LEFT,VALIGN=TOP, ROWSPAN=1, and COLSPAN=1.

I am a table CELL

<TABLE WIDTH=100 BORDER >
<TR >
<TD >I am a table CELL</TD >
</TR >
</TABLE >

This slightly more complex table has two rows with three columns in each row. Table and cell characteristics are set in the TABLE tag. They will be valid for ALL cells in the table unless a cell or row overrides it. Cell alignment is set in the TR tags and is valid for all cells in the row unless overridden

Apples	MacIntosh	Greening
Pears	Bosc	Bartlet

< CENTER > < TABLE WIDTH=400 BORDER=3
CELLPADDING=5 CELLSPACING=0
ALIGN=RIGHT VALIGN=MIDDLE >
< TR ALIGN=CENTER VALIGN=MIDDLE >
< TD WIDTH=100 >Apples < /TD >
< TD WIDTH=150 >MacIntosh < /TD >
< TD WIDTH=150 >Greening < /TD >
< /TR >
< TR ALIGN=CENTER VALIGN=MIDDLE >
< TD >Pears < /TD >
< TD >Bosc < /TD >
< TD >Bartle t< /TD >
< /TR >
< /TABLE >
< /CENTER >

Notes:

If you want to align the table itself, alignment tag (CENTER,LEFT,RIGHT) must appear outside of the table.
You only need to define the width of a column in the first row. Columns in the following rows will be the same unless you change them. However, for consistency, you may want to define them for each row.
If the given table width is too small for the sum of your columns, Netscape will try to fit them into the given width and will override your column width settings. (In fact, Netscape may override them in any event. If this is detrimental to your table, make a space row and put an unbroken string of astericks or any other suitable character in that row. This will force Netscape to behave.
If the column contents do not fit into their cell, Netscape will override your settings, usually for height, but will take up any extra room left between table width and the sum of the column widths.
You can define WIDTH as WIDTH% and give a proportion of the table for a column rather than an absolute width.
All cells span one row and one column unless overridden.
Rather than use the ALIGN tag to override individual cell alignments, you can also use CENTER,LEFT,and RIGHT tags within the cell itself.

This final table has a caption, headers, and fancier cell formatting.

***Fruit***
Kind	Type 1	Type 2
Apples	MacIntosh	Greening
Pears	Bosc	Bartlet

< CENTER >
< TABLE WIDTH=400 BORDER=3 CELLSPACING=1 CELLPADDING=5 >
< CAPTION ALIGN=TOP > < Center > < B > < I > < FONT SIZE=5 >Fruit
< /FONT; > < /I > < /B > < /Center > < /CAPTION >
< TH ALIGN= CENTER VALIGN=MIDDLE >
< TD WIDTH=100 > < B > Kind < /B > < /TD >
< TD WIDTH=100 > < B > Type 1 < /B > < /TD >
< TD WIDTH=100 > < B > Type 2 < /B > < /TD >
< /TH >
< TR ALIGN=CENTER VALIGN=MIDDLE >
< TD > < BR > < /TD >
< TD WIDTH=100 > < < B > Apples < /B > < /TD >
< TD WIDTH=150 > MacIntosh < /TD >
< TD WIDTH=150 > Greening < /TD >
< /TR >
< TR ALIGN=CENTER VALIGN=MIDDLE >
< TD > < BR > < /TD >
< TD > < B > Pears < /B > < TD > Bosc < /TD >
< TD > Bartlet < /TD >
< /TR >
< /TABLE >
< /CENTER >

Notes:

There is one fewer column in the header row. That is the short column on the left. If you do not do this, the headers will be moved over.
The ALIGN tag in the CAPTION designates whether the caption appears at theTOP or BOTTOM of the table.

Helpful Links

For a really detailed look at Table coding, examine the Netscape Tables Page and Netscape Table Sampler.

Putting an Image in a Cell

Putting a Reference in a Cell

Any image or reference which you can place on a page can be placed in a table cell. You can use this to frame the image and to caption it neatly.

This lovely picture of flowers and a visiting butterfly was derived from the pages of Randy D. Ralph's Icon and Image Collection: Images and Flowers for the Internet

Here is the HTML for this table.

<CENTER><TABLE WIDTH=400 CELLPADDING=5 CELLSPACING=0 BORDER=5>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD >
<IMG WIDTH=136 HEIGHT= 108 SRC="images/flow7.gif" ALT="Picture of Flower" >
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD >
This lovely picture of flowers and a visiting butterfly was derived from the pages of Randy D. Ralph's Icon and Image Collection: <A HREF="http://www.infi.net/~rdralph/icons/flowers/"> Images and Flowers for the Internet</A>
</TD>
</TR></TABLE></CENTER>

Extending a Cell over More than One Column

The COLSPAN=x is used as part of the initial cell tag in order to extend a cell over multiple columns. One of the uses for this is to put a major caption over two or more columns. The following simple example shows you how to do it.

Center Coordinates

Graphics Object X Y

Circle 1 25 152

Circle 2 412 365

Square 1 239 23

As you can see, the "Center Coordinates" caption spreads over both the "X" and "Y" columns. The "Graphics Objects" caption has been relegated to the second row. Wouldn't it be better if it could be placed in a single cell which extended over the top two rows. A very simple modification to the code will make this possible. See the next section!

Extending a Cell over More than One Row

Cells can be extended over multiple rows by using ROWSPAN=x in the initial cell tag. The following table is identical to the one above except tthat ROWSPAN=2 has been inserted into the very first cell, and the first cell in the second row has been omitted.

Graphics Object Center Coordinates

X Y

Circle 1 25 152

Circle 2 412 365

Square 1 239 23

Here is the code for this table

<CENTER><TABLE WIDTH=400 CELLPADDING=5 CELLSPACING=0 BORDER=2>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD WIDTH=250 ROWSPAN=2 >Graphics Object
</TD>
<TD WIDTH=150 COLSPAN=2 ><B>Center Coordinates</B>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD WIDTH=75><B>X</B>
</TD>
<TD WIDTH=75><B>Y </B>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD WIDTH=250> Circle 1
</TD>
<TD WIDTH=75>25
</TD>
<TD WIDTH=75>152
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD WIDTH=250>Circle 2
</TD>
<TD WIDTH=75>412
</TD>
<TD WIDTH=75>365
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD WIDTH=250> Square 1
</TD>
<TD WIDTH=75>239
</TD>
<TD WIDTH=75>23
</TD>
</TR>
</TABLE></CENTER>

Empty Cells

If you wish to have a an empty cell, you must fill it with a placeholder. This is usually the <BR> tag. Here is a simple table where empty cells do or do not include the placeholding tag.

Notice that cells 2 and 4 actually appear as cells. Cells 1,3, and 5 are not shown as cells. Here is the HTML

<CENTER><TABLE WIDTH=250 CELLPADDING=5 CELLSPACING=5 BORDER=2>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD WIDTH=50 >
</TD>
<TD WIDTH=50 ><BR>
</TD>
<TD WIDTH=50 >
</TD>
<TD WIDTH=50 ><BR>
</TD>
<TD WIDTH=50 >
</TD>
</TR>
</TABLE></CENTER>

HTML for Image Catalogue

Retrieve the HTML for Image Catalogue as a text file.

This page was last updated on

Mail comments about Morphic Molecules pages to everett@txdirect.net

	Center Coordinates
Graphics Object	X	Y
Circle 1	25	152
Circle 2	412	365
Square 1	239	23

Graphics Object	Center Coordinates
Graphics Object	X	Y
Circle 1	25	152
Circle 2	412	365
Square 1	239	23