Navpooh - Mike's HTML Tutorial

And now...TABLES!

Now that you've learned basic text manipulation, how to get from page to page, and how to add graphics to your pages, let's take a look at tables. Well, let's take a closer look at tables - actually, you've been looking at tables to read about some of the tags we've discussed so far (clever, huh?).

And, oh yeah - that dodad at the top of the screen? It's a table...

The basic tags for tables are:


		<TABLE>...</TABLE>
		<TR>...</TR
		<TD>...</TD>

These three tags are hierarchical; that means that there is a superior/inferior relationship.

Huh!?

Okay, okay...it's easier to show what I'm trying to say than to say it (that "a picture is worth a thousand words" thing...). Here is a small table which has only one line, with two columns.

Column 1

Column 2

And here's the HTML code that created that dinky table:


		<CENTER>
		<TABLE BORDER=2>
		    <TR>
			  <TD><FONT SIZE=-1>Column 1</FONT>
			  </TD>
			  <TD><FONT SIZE=-1>Column 2
			  </TD>
		    </TR>
		</TABLE>

Note in the HTML code for the table, above, that the beginning and ending parameters of the tags are aligned vertically, with eah inferior, or lower, level is indented from the immdeiately superior, or next higher, level. This coding style serves two purposes: 1) it makes the code easy to follow - and therefore easy to modify - and 2) it lets you visually verify that you haven't forgotten a closing tag.

Okay, what are the tags which make a table appear in a web page? Let me show you - in a table. We'll begin with THE table tag - the <TABLE> tag!

Below is a table which shows the attributes allowed in the opening <TABLE> tag. You've probably noticed that it is laid out nicely, with borders between the columns and rows. The border is created by one of the attributes in the opening <TABLE> tag; if you omit the BORDER attribute, the table will still be formatted as a table but without the lines around and between the cells - the individual area containing data. All the tables in this tutorial up to this point were created without the BORDER attribute - that's why you didn't know you were looking at tables.

T

A

B

L

E ...ALIGN=value This defines where the table will be positioned on the page. This permits text to "wrap" around the displayed table. The valid options for ALIGN are LEFT and RIGHT.

...BORDER=n This attribute places the lines around the table. The borders will appear either around all cells it this attribute is used, or around none if this attribute is omitted. The number following the attribute is the width, in pixels, of the border. I'm not aware of a technical limit to the value, so use your imagination.

...BGCOLOR=value When used, this attribute will color the background of the cells in the entire table. It can be overridden by a BGCOLOR attribute in a <TD> or <TH> tag.

...VSPACE=value
...HSPACE=value These attributes place blank space around the table to set it off from the surrounding text. VSPACE pads the table to the top and bottom; HSPACE pads to the left and right.

...WIDTH=value When used, this attribute will determine either what percentage of the entire width of the display window the table will occupy, or how wide in pixels the table will be. This permits you to custom-fit a table to permit text to flow around it nicely.

Whew! That was something, wasn't it? Let me answer that: yes, it was something -- it was only the beginning! The HTML tags we've just discussed affect the entire table; that's why they were discussed in relation to the <TABLE> tag. We still have to discuss the nitty-gritty of tables - the tags which define the cells (the rows and columns).

THIS is a one-row, one-column TABLE, with a 10-pixel border and a BGCOLOR of LINEN

SO is this - except there's no border

The tags which control the display of the cell contents are:

<TR>
...</TR> Creates rows within the table

<TH>
...</TH> causes text in the individual cell to be displayed in bold format. The <TH> tag is used in place of the <TD> tag, below

<TD>
...</TD> defines the content of the cell. A table cell defined with the <TD> tag may contain anything allowed within the general <BODY> tag of the document. This includes text, images, links - even other tables.

<TR> ...</TR>	Creates rows within the table
<TH> ...</TH>	causes text in the individual cell to be displayed in bold format. The <TH> tag is used in place of the <TD> tag, below
<TD> ...</TD>	defines the content of the cell. A table cell defined with the <TD> tag may contain anything allowed within the general <BODY> tag of the document. This includes text, images, links - even other tables.

Did you notice that the last row in the previous table was displayed in a larger font than the rest of this page? That's because, while the <BASEFONT> tag modifies all the text which follows it, it does not affect the text displayed in table cells. In order to have the text in the tables in this tutorial display at the smaller size I had to code each cell with the <FONT SIZE=-1> tag following the <TD> tag.

You can place tables inside tables; to do this, simply code a table within a TD tag of the first table. Here is an example of a "compound" table and what you can do with a table:

VALIGN=TOP	GO NAVY!	VALIGN=BOTTOM

Okay... what can you tell about the table above? Here are the attributes I used so you could see how they affect the display:

I've created a table within a table - the line that is alternating red-white-red is a second table which is contained in the only cell of the only row of the first table.
I used "BGCOLOR=RED" as an attribute in the <TR> tag of the only row in the second table
I used "BGCOLOR=WHITE" as an attribute in the second <TD> tag of the second table. Note that it only affected the background color in that cell; the first and third cell's background color is controlled by the "BGCOLOR" attribute of the <TR> tag.
I used <TH> instead of <TD> to define the third cell in the second table to demonstrate the effect.
I used <FONT COLOR=WHITE> in the third cell of the second table
I imbedded a graphic in the second cell; like I said, you can put anything in a table cell that is allowed in the body of an HTML document.

And here is the code that created the sample table above:


	<TABLE BORDER=10>
	<TR>
	    <TD><TABLE BORDER=10>
		<TR BGCOLOR=RED>
		    <TD VALIGN=TOP>VALIGN=TOP
		    </TD>
		    <TD BGCOLOR=WHITE><IMG SRC="mike/small_ram1952.gif">
			<BR><FONT SIZE=-2><CENTER>GO NAVY!</CENTER></FONT>
		    </TD>
		    <TH VALIGN=BOTTOM><FONT COLOR=WHITE>VALIGN=BOTTOM
		    </TH>
		</TR>
		</TABLE>
	    </TD>
	</TR>
	</TABLE>

Picture this...

go back one to learn how to put images on your page! There's lots more...

follow me!

This page hosted by
Get your OWN FREE HOME PAGE

Back to Navpooh's Home Port

HTML index Back to HTML tutorial index

T A B L E	...ALIGN=value	This defines where the table will be positioned on the page. This permits text to "wrap" around the displayed table. The valid options for ALIGN are LEFT and RIGHT.
	...BORDER=n	This attribute places the lines around the table. The borders will appear either around all cells it this attribute is used, or around none if this attribute is omitted. The number following the attribute is the width, in pixels, of the border. I'm not aware of a technical limit to the value, so use your imagination.
	...BGCOLOR=value	When used, this attribute will color the background of the cells in the entire table. It can be overridden by a BGCOLOR attribute in a <TD> or <TH> tag.
	...VSPACE=value ...HSPACE=value	These attributes place blank space around the table to set it off from the surrounding text. VSPACE pads the table to the top and bottom; HSPACE pads to the left and right.
	...WIDTH=value	When used, this attribute will determine either what percentage of the entire width of the display window the table will occupy, or how wide in pixels the table will be. This permits you to custom-fit a table to permit text to flow around it nicely.

Last updated Saturday, December 27, 1997