September 17, 1999

Page 1

LINK EXCHANGE PROGRAMS

I2U2ME - The banner visitation program. "I'll visit your web site, and I invite you to visit my web site." I to you, you to me. This site give you the opportunity to make a quick and easy FREE banner right on the spot. After your banner is made you can have the banner placed FREE of charge on the I2U2ME web site. The banner of all the members are rotated on a credits basis and you will be notified via e-mail when another member visits your site. If you are interested in more information please visit: www.i2u2me.com

On To Page 2

Page 2

Beginning HTML
written by Nicole Bibee

General Table Syntax

There are 2 ways to insert tables on a web page. A text table is just what it sounds like, monospaced text that is evenly spaced in columns and rows. This type of table is not beautiful but is effective. Rows can be separated with standard characters like hyphens or equal signs.

Also coding a text table is easier than a graphical table. The code used to start a text table is <.PRE> and <./PRE> to end the table. Next type the text exactly and use spaces to insert blank spaces appropriately. Creating graphical tables are more complex and require more tags. First of all, begin the code with <.TABLE> and <./TABLE> to end. There are 4 properties associated with graphical tables:

<.CAPTION>caption of the table here<./CAPTION>
<.TH>table headers<./TH>
<.TR>table row<./TR>
<.TD>table data for each cell<./TD>

Here is a sample table:

CAPTION GOES HERE

Column One row 1 & col 1 row 2 & col 1 row 3 & col 1

Column Two row 1 & col 2 row 2 & col 2 row 3 & col 2

Here is the code for this table:
<.CENTER>
<.TABLE>
<.CAPTION>CAPTION GOES HERE<./CAPTION>
<.TR>
<.TH><.u>Column One - table header<./u><./TH>
<.TH><.u>Column Two - table header<./u><./TH>
<./TR>
<.TR>
<.TD>row one & column one<./TD>
<.TD>row one & column two<./TD>
<./TR>
<.TR>
<.TD>row two & column one<./TD>
<.TD>row two & column two<./TD>
<./TR>
<.TR>
<.TD>row three & column one<./TD>
<.TD>row three & column two<./TD>
<./TR>
<./TABLE>
<./CENTER>


Modifying the Appearance of a Table

Next we will learn how to modify certain properties to create the design. We will begin with borders. Borders are lines that surround the table and the cells. The border is measured in pixels and we just add the code BORDER=1 to the table tag. For example: <.TABLE BORDER=1>

You can also use another property called cellspacing, this is the amount of space inserted between table cells. This size is the internal border in pixels. Another property to use would be cellpadding, the distance from the text to the cell border. An example is <.TABLE BORDER=1 CELLSPACING=1 CELLPADDING=2>


Alignment

This code is similar to the alignment in the <.img src="filename" align=center> tag. There are 3 properties associated with:

ALIGN=LEFT                     ALIGN=CENTER                    ALIGN=RIGHT

One thing to remember, the center alignment needs to be a separate tag <.CENTER> before the <.TABLE> tag and the end tag <./CENTER> needs to follow the <./TABLE> end table tag.

An example:
<.CENTER>
<.TABLE BORDER=1 CELLSPACING=1 CELLPADDING=2>
table information here
<./TABLE>
<./CENTER>

Also, you can use the alignment property in the <.TD> table data tags along with a new vertical alignment. This vertical alignment has three values that can be used and is specified as VALIGN=TOP/MIDDLE/BOTTOM. Note, if you want to center align a single column the ALIGN=CENTER needs to be placed in each <.TD> tag for that column.


Defining Size

Defining a specific size for the table is pretty much the same as the size of an image. We will add width=size and/or height=size in pixels to the table tag. <.TABLE WIDTH=600 HEIGHT=200> To define a size for a column add width=size to the <.TD> tag. <.TD WIDTH=120>


Modify Background Colors

When defining color for the background you will need to use the color value associated with that color. The code is BGCOLOR="#value" and can be added to the entire table. <.TABLE BGCOLOR="#FFFFFF"> Or you can define different colors for specific parts of the table by adding the code in the proper tag. <.TD BGCOLOR="#000000"> This code can also be added to the <.TH> and <.TR> tags.


Spanning Rows & Columns

Last but not least, spanning rows and/or columns can create an effective design to your table. The code, for example, COLSPAN=3 is added to the <.TD> tag. Same goes for spanning rows, ROWSPAN=2. Just remember which cells are being spanned because the number of cell tags will need to be adjusted or the table will be off.

Next week we will cover page layout by nesting tables inside each other.


Notice: We had to insert a period after the less than sign to make the tags viewable by your browser. When writting your own code please do not add the period to the tags.

On To Page 3

Page 3

ARE YOU LOOKING TO IMPROVE YOUR SITE?
written by Nicole Bibee

Web Site Garage is the best place to turn to. It offers steps to help you promote your site and gives you the opportunity to register with hundreds of search engines. There is a tune up program that will give you statistical information on your site regarding: browser compatibility, load time, HTML design, dead links and search engine readiness. Also, they offer a gif lube which will compress your web page images to help reduce load time.

Home