Support This Site

WELCOME!!

 

AmeriYank's HTML Table Tutorial--Lesson Three.

 

In the last lesson, we learned how to create a simple, two-celled table with a 3-D border , background color using non-default text like this:

This is a way cool table.

 

This week, we will learn how to control the width of the table and individual cells within the table. We will learn how to add backgrounds to some cells and colors to others. We will learn how to control text color and font, and how to align images and text within a cell. AND, we will learn to make tables where some cells span more then one cell. It might all look like this:

This is a table with 4 rows. But the columns are arranged to achieve this look. This is done using the colspan="#" command. You place it in the <TD> portions of your table. This is the default font of "Times New Roman".

You can write on this background. This text is centered.

But we put a bunny image on it for fun. This is the "Arial" font.

This is an image placed on a cell using the background color in the table. The image is centered, but the text is aligned to the left.

This is the default font of "Times New Roman"

You can write on this background, too. This text is aligned on the left .

and the same bunny is here, too.

This is the font called Lucida Handwrting.

This cell has no special background color. It uses the one specified for the table. It is the same for the cell color with the bunny in it on the right.

This is the default font of "Times New Roman"

This cell has a special background color all it's own, just for this cell. It matches the cell color with the bunny in it on the left.

This is the default font of "Times New Roman"

 

Now, before you have heart failure and think, "How am I EVER going to understand THAT?" take a DEEP breathe and stay calm. You already know how to do most of what is used to create the above table.

"Oh, YEAH?", you say, "PROVE IT!!"

OK, I will... (smile)

Last week we learned how to change a background color for a table, so that it is different from a background color for the web page itself. Low and behold, the command was the same, as what you would put in the <BODY> tag to specify a backgound color, wasn't it? It was our ever-useful command, bgcolor="nameofcolor", right? Except, instead of putting it into the <BODY> tag, you put it into the <TABLE> tag, didn't you? And it worked just wonderfully, right?! Guess what? All that same cool stuff works in <TD> tags, too. If you want to change the background color for a specific cell within a table, you just use write:

<TD bgcolor="nameofcolor">

So, see, you already know HOW to do that, you just needed someone to tell you WHERE to put it.

"Ok", you say, "But how did you get the backgrounds into the cells? Thats' got to be really, hard, right?"

Well, no, not exactly. Remember when we learned how to place a graphic background on a webpage? We put the command, background="nameofgraphic.jpg" (or .gif) into our <BODY> tag, right? Guess what, that SAME command, when placed in the <TABLE> or the <TD> tag will do the exact same thing.

So, to place a background into a table tag, so it will show in all the cells in the table write:

<TABLE background="nameofgraphic.jpg">

To OVERRIDE the table command and have different backgrounds in specific cells, you need to place in the code into EACH individual cell the following code:

<TD background="nameofgraphic.jpg">

So, see, you already knew how to do that, too!!

OK, now you think, "Well, putting the text, font and images into the cells HAS to be hard!"

Sorry, you already know those codes, too!

The <FONT>, <IMG> , text , EVERYTHING is the same. Just like we learned in the Basic HTML Lessons. That's why I called it "basic"! (smile) You just put it AFTER the <TD> tag. So, an individual cell code with a background all it's own, text and an image, might look like this:

<TD background="nameofimage.jpg"><FONT face="arial" size="2" color="#FFFFFF">
Write in some text.
</FONT>
<IMG src="nameofimage.gif">
</TD>

Just one thing, when you use a table, it blocks font commands from your basic web page and within the table itself. In other words, you will need to tell the PC what font face, font color, etc to use for EACH cell within a table. You can make it a teensy bit easier on yourself by specifying some things within the <BODY> tag. Those will be read by the PC as to apply to the whole page. But it will not work with fonts or size of text, you can only specify text color and link color. To review this go back to Lesson Ten

You can also specify the width of a table and of each cell. For this you do need to know a little math, but not much. (thank the Lord!). NOW, we are getting into the new stuff!

First, you can specify the size of a table or cell in percentage or pixels. In this lesson we will learn how to use percentages. We we learn pixels another time.

Percentages are often best for determining the size of the table in relationship to the web page itself. For example, you can have your table go 100% across the page, or 50% or even 1%. Of course, if you used 1% your table would probably be invisible, but, technically, you can do it.

The code to do that is the , SURPRISE, width code. And it goes into your <TABLE> tag, like so:

<TABLE width="50%">

You change the 50 to whatever number you want.

The width command works in cells, too. BUT REMEMBER , when you put a percentage into a <TD> tag, you are specifying the percentage of the TABLE, not the webpage.

So, if you wanted a table with a red background color and white border, that took up 50% of the webpage, with two cells that were smaller on one side and larger on another, your code might look like this:

<table width="50%" bgcolor="#FF0000" border="5" bordercolor="#FF0000">
<TR>
<TD width="25%"></TD>
<TD width="75%></TD>
</TR>
</TABLE>

and your table would look like this:

   

One IMPORTANT note, your percentages have to be even. In other words, if you have 3 cells two cells have to be 33% and one has to be 34% in order to make the 100%. For example, if the above table was a 3-celled one where you wanted all the cells to be equal, your code would look like this:

<TABLE width="50%" bgcolor="#FF0000" border="5" bordercolor="#FF0000">
<TR>
<TD width="33%"></TD>
<TD width="33%"></TD>
<TD width="34%"></TD>
</TR>
</TABLE>

It doesn't matter which cell is 34%, just one of them has to be or the computer gets all confused. The table that the code above creates will look like this:

     

OK,just so you can see how easy it is, I will show the big table from the beginning of the lesson with the commands for the individual cells in it.

Remember the COLSPAN command is used to tell the computer how many COLUMNS a particular cell will span ACROSS. The <TR> tag is used to create a NEW ROW in a table.

I have left the text and images within the table as they appear in the proper one. The codes to create it are in black text. The text color has been specified in the <BODY> tag of the page itself. Where no font is specified, the default font of "New Times Roman" (at least in mine and most PCs) will appear.

The <TABLE> and <TR> tags would not appear within a <TD> tag, but I placed them in the example below so you could see what all the code would look like.

 

<TABLE width="85%" border="5" bordercolorlight="#FF0000" bordercolordark="800000" bgcolor="#800080">
<TR>
<TD width="100%" colspan ="4">
<P align="center>

This is a table with 3 rows. But the columns are arranged to achieve this look. This is done using the colspan="#" command. You place it in the <TD> portions of your table. This is the default font of "Times New Roman".
</P></TD>
</TR>
<TR>

<TD width="33%" background=
"holidayfg.jpg">
<P align="center">
<font color="#FF000
face="arial">

You can write on this background. This text is centered.
<br><br>
<IMG src="bunny.gif>>
<br><br>

But we put a bunny image on it for fun. This is the "Arial" font.

</font></p>
</TD>

<TD width="33%"
COLSPAN="2" >
<P align="center>
<IMG SRC="flower.jpg">

</P><P align="left">

This is an image placed on a cell using the background color in the table. The image is centered, but the text is aligned to the left.

<br><br>

This is the default font of "Times New Roman"

</P></TD>

<TD width="34%" background="bluish.jpg">
<P align="center">
<FONT face=
Lucida Hamdwriting"
color="#800040">

You can write on this background, too. This text is aligned on the left .

<br><br>
<IMG SRC="bunny.gif">

<br><br>

and the same bunny is here, too.

<br><br>

This is the font called Lucida Handwrting.

</FONT></P>
</TD>
</TR>
<TR>

<TD width="33%">
<p align="center">

This cell has no special background color. It uses the one specified for the table. It is the same for the cell color with the bunny in it on the right.

<br><br>

This is the default font of "Times New Roman"

</p>
</TD>

<TD width="17%">
<P align=
"center">

<IMG src=
"bunny.gif">

</p>

</TD>

<TD width="16%"
bgcolor=
"#008080>
<P align=
"center">

<IMG src=
"bunny.gif">

</p>

</TD>

<TD width="34%"
bgcolor="#008080>
<P align="left">

This cell has a special background color all it's own, just for this cell. It matches the cell color with the bunny in it on the left.

<br><br>

This is the default font of "Times New Roman"

</P>
</TD>
</TR>
</TABLE>

 

So, if we were going to have a page without a title or anything that simply consisted of the above table, our HTML page code would look like this:

 

<HTML>
<BODY text="#FFFFFF">

<TABLE width="85%" border="5" bordercolorlight="#FF0000" bordercolordark="800000" bgcolor="#800080">
<TR>

<TD width="100%" colspan ="4">
<P align="center>
This is a table with 3 rows. But the columns are arranged to achieve this look. This is done using the colspan="#" command. You place it in the <TD> portions of your table. This is the default font of "Times New Roman".

</P></TD>


</TR>
<TR>

<TD width="33%" background="holidayfg.jpg">
<P align="center">
<font color="#FF000 face="arial">
You can write on this background. This text is centered.

<br><br>
<IMG src="bunny.gif>>
<br><br>
But we put a bunny image on it for fun. This is the "Arial" font.
</font></p>
</TD>

<TD width="33%" COLSPAN="2" >
<P align="center>
<IMG SRC="flower.jpg">
</P><P align="left">
This is an image placed on a cell using the background color in the table. The image is centered, but the text is aligned to the left.
<br><br>
This is the default font of "Times New Roman"
</P></TD>

<TD width="34%" background="bluish.jpg">
<P align="center">
<FONT face=Lucida Hamdwriting" color="#800040">
You can write on this background, too. This text is aligned on the left .
<br><br>
<IMG SRC="bunny.gif">
<br><br>
and the same bunny is here, too.
<br><br>
This is the font called Lucida Handwrting.
</FONT></P>
</TD>


</TR>
<TR>

<TD width="33%">
<p align="center">
This cell has no special background color. It uses the one specified for the table. It is the same for the cell color with the bunny in it on the right.
<br><br>
This is the default font of "Times New Roman"
</p>
</TD>

<TD width="17%">
<P align="center">
<IMG src="bunny.gif">
</p>
</TD>

<TD width="16%" bgcolor="#008080>
<P align="center">
<IMG src="bunny.gif">
</p>
</TD>

<TD width="34%" bgcolor="#008080>
<P align="left">
This cell has a special background color all it's own, just for this cell. It matches the cell color with the bunny in it on the left.
<br><br>
This is the default font of "Times New Roman"
</P>
</TD>
</TR>
</TABLE>

</BODY>

</HTML>

That's it for this week!!

HAPPY CREATING!

 

HOME

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

Design and Sell Merchandise Online for Free

 

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