WELCOME!!

AmeriYank's HTML Table Tutorial--Lesson Two.

In the last lesson, we learned how to create a simple, two-celled table like this:

In this lesson, we shall learn how to make our table more interesting by adding borders, and a background. We will also learn how to use a font within a table.

You can add a simple one-dimensional border to your table. If the color you choose is red, your table will look like this:

Isn't this cool?

To add a border and select a color to the TABLE itself, you add to the table tag. The code to create the above table (without the image and the text) is:

<table border="5" bordercolor="#FF0000">

border="5" can be changed. You can specify the whatever width you want. Experiment to see how cool you can make it. Single-celled tables with large borders can make really WAAAAY cool frames for pictures. And the download time is less for a table than for an entire frame from a graphic.

If you want to change the background color just within the table itself, your code will look like this:

<table border="5" bordercolor="#FF0000" bgcolor="#800080">

Purple is a neat color, too

If you like, you can create a table border with a 3-dimensional look. To do that, you need to DROP the bordercolor from the tag and ADD two other attributes:

bordercolorlight="nameofcolor"
bordercolordark="nameof color"

So, suppose I want to create a red border, but make it look like it is 3-dimemsional. To do that, I have to choose a light and a dark color. In this care, I have chosen red for my light color and maroon for my dark.

So, now, the code in my table tag looks like this:

<table border="5" bordercolorlight="#FF0000" bordercolordark="#80000" bgcolor="#800080">

This is really cool, too!

That done, we need to learn about the font tag and tables. As you know from previous lessons, the FONT tag will work in all sections of your page from the

<FONT> to the </FONT>

In other words, all the text between those tags will be whatever you tell it to be. You can add one font tag after the body tag and not close it until the bottom of your page and all your text will be the same on your page. That is, unless you put in a table. If you use tables, you have to tell each and every cell within the table itself EXACTLY what font and size to use. If you do not, if will default to Times New Roman and size 2.

So, if you want to specify a font, you MUST do it for EVERY cell in which you have text. You do this AFTER the <TD> tag. The rules for the FONT tag itself are the same as if it was elsewhere on your page. So, if you want to have green text, Arial for the font, and size 2 type, your code would look like this:

<TD>
<FONT face="arial" size="2" color="#80FF80">

To make your text bold, as shown below, use the <strong> tag as we learned in previous lessons.

This is a way cool table.

So, now we are going to add to our existing table.html page. To create the table above, your code will look something like this (the part in red is what we learned in this lesson):

That's it for this week!!

HAPPY CREATING!

HOME

Mary, Madonna and Blessed Virgin Mother and Jesus
Designs for Tsunami Relief.

Tut
Back to Table Lesson One
Back to Table Lesson Two
On to Table Lesson Three
On to Table Lesson Four