KISS HTML - 18

KISS HTML
You CAN write HTML code from scratch

"Tables" for the Faint-of-Heart or <TABLE> tag

Tables were apparently devised to show data in a chart form. Therefore, most people tell you what the tags are for to make a chart.

Realistically, most web pages don't use charts at all; they use tables to control how the page looks. This can dramatically change how you look at tables, and, more importantaly, how you code your page to utilize the "Table" functions.

Instead of this "chart" table.......
Table Heading

Table Data Table Data Table Data Table Data

Table Data Table Data Table Data Table Data

Table Data Table Data Table Data Table Data

Gulp!

Table Heading
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data

.....you have an image graphic -
Some body text -

Edward, King of England (Edward the Exile) was born in 1016 A.D. He married in 1044 at Kiev, Ukraine, and had a son, Malcom III, King of Scotland. Malcom was married to St. Margaret, Queen of Scotland. They lived at Edinburgh Castle, Scotland, where he died on 16 Nov. 1093.
Malcom's son was Henry I, King of England, was married to Mathilde, Princess of Scotland.
Henry I was born in 1068 and was the youngest son of William the Conqueror. In 1100, after his older brother died in a hunting accident and the middle brother was in the Holy Land on a crusade, Henry seized the throne.
Henry was a strong and intellectual ruler, believing in the rights of the common man. He issued a "Charter of Liberties" detailing people's rights, and 100 years later this charter became the foundation of the historical Magna Carta.

And you want it set up sorta like a newspaper, with 3 columns.

How do you do it? With a table, of course. So that it looks like this:

Sword
Edward, King of England (Edward the Exile) was born in 1016 A.D. He married in 1044 at Kiev, Ukraine, and had a son, Malcom III, King of Scotland. Malcom was married to St. Margaret, Queen of Scotland. They lived at Edinburgh Castle, Scotland, where he died on 16 Nov. 1093.
Malcom's son was Henry I, King of England, was married to Mathilde, Princess of Scotland.
Henry I was born in 1068 and was the youngest son of William the Conqueror. In 1100, after his older brother died in a hunting accident and the middle brother was in the Holy Land on a crusade, Henry seized the throne.
Henry was a strong and intellectual ruler, believing in the rights of the common man. He issued a "Charter of Liberties" detailing people's rights, and 100 years later this charter became the foundation of the historical Magna Carta.

Here's the code that makes the above work:

<TABLE><TR>
<TD ALIGN=LEFT VALIGN=TOP>
<IMG SRC="images/sword1.gif" BORDER=0 ALIGN=TOP ALT="Sword"> 
<TD ALIGN=LEFT VALIGN=TOP>


<IMG SRC="images/dot_clea.gif" hspace=8> Edward, King of England (Edward the Exile)...... <IMG SRC="images/dot_clea.gif" hspace=8> Malcom's son was Henry I, King of England, ....... 
<TD ALIGN=LEFT VALIGN=TOP>


<IMG SRC="images/dot_clea.gif" hspace=8> Henry I was born in 1068 and was the........ 
<IMG SRC="images/dot_clea.gif" hspace=8> Henry was a strong and intellectual.......... 

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

The "Table" code that you used, looks like this:
<TABLE> <TR>

</TD></TR></TABLE>
So, what do they mean?????

<TABLE> - Hey, browser, here comes a table!

<TR> - It's necessary, so just put it in (it means Table Rows).

<TD ALIGN=LEFT VALIGN=TOP> - <TD> is Table Data. Used in this manner, it can be interchanged with <TH>; in other words, use either one. Note, however, that in the Netscape browser, <TD> and <TH> are totally interchangeable, but in MSIE, <TD> displays fonts in normal typeface while in <TH> fonts appear in bold face.
<TD ALIGN=LEFT - means align everything under this tag to the far left of this portion of the table.
<TD ALIGN=LEFT VALIGN=TOP> - means vertically align everything to the top.
In other words, everything under this tag is aligned to the very top and to the far most left.

In the Web page we are developing, I have added a "graphic drawing" of a dog to the portion of the page devoted to Remington. To display it, I added a similar table to the above.
The code is written like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
<HTML>

<HEAD>
<TITLE>Index. htm - My First Web Page</TITLE>
</HEAD>

<CENTER>


This web page belongs to Cyberperson. 



<IMG SRC="images/guy-comp.gif"> 

<HR>

<CENTER>

I live in Los Angeles. 
 </CENTER>

Los Angeles is the largest city on the west coast. There are over 8 million people living in the area. Surrounded by mountains, and bordered by the Pacific Ocean, you can find more to do here than almost anywhere else in the world! You can learn more about my city by going to this
<A HREF="http://www.losangeles.com"> Los Angeles link. </A>

<CENTER>

I work for Calliope Studios. 
 </CENTER>

Calliope produces titles and introductions to Hollywood movies and TV shows. You can see my work at the beginning of many of the TV shows of today.

<CENTER>

I have a dog named Remington. 
 </CENTER>
<TABLE>< TR>
<TD ALIGN=LEFT VALIGN=TOP>
<IMG SRC="images/dog.gif" HEIGHT=43 WIDTH=100 ALT="Dog graphic">

<TD ALIGN=LEFT VALIGN=TOP>

Remington is a black Labrador Retriever. He loves the water and swims the whole time we go to the beach. He is my very best friend. I have some photos of Remington which you can see by clicking
<A HREF="remingtn.htm"> HERE. </A>
</TD> </TR>
</TABLE>

<CENTER>

My hobbies are cooking and movies. 
 </CENTER>

We have friends come over twice a month for a "bring-your-own-dish" party. The food is great and we do a lot of recipe swapping. If you would like some of my recipes, send me an e-mail by clicking
<A HREF="mailto:your_name@hotmail.com"> HERE. </A>

</BODY>

</HTML>

The above code on your Web page would look like this:

Note: If we had put the image before the typed copy, without using the table, then the first line of the typed copy would have appeared to the right of the image, but the next line would have moved to the left border of your Web page, like this:

Remington is a black Labrador Retriever. He loves the water and swims the whole time we go to the beach. He is my very best friend. I have some photos of Remington which you can see by clicking HERE.

The "Table", therefore, is required to keep all of the elements in their place.

In the next lesson, we use a table to make space for a Border Set.

<- Previous | Next ->