Make your own free website on Tripod.com

Month 3 Week 4

Tables

Creating A Basic Table

Tables are another area where HTML is just like plain English. You just need to remember that they are organized in rows, which go horizontally from left to right.

We'll start by creating a basic table in HTML, then we'll modify it and discuss ways you can use your newly acquired skills.

Start by creating a new HTML document -

<HTML>
<HEAD>
<TITLE>
My First Table</TITLE>
</HEAD>
<BODY>

Now, you tell the browser that you want it to draw a table for you, like this -

<TABLE>

See, I told you it was just like plain English!

Next, you should add a caption to your table - that is the title above the table, telling people why you have a table on your page.

<CAPTION>My First Table</CAPTION>

As I said in the first paragraph, tables are made up of rows which go from left to right. So let's create your first row -

<TR>

<TR> stands for table row, making it easy to remember.

Next, you start adding in the individual cells or sections of your table. For the first row, you will want to add in headers or titles telling what the stuff below them is for.

<TH>Colors</TH>
<TH>
In A Rainbow?</TH>

<TH> stands for table header, again making it easy to remember.

Since that is all we'll be having in our first row, you need to close out the row tag like this - 

</TR>

Start another row -

<TR>

And in this row, you'll begin putting in the actual data for the table - otherwise known as the stuff underneath the headers. 

<TD>Red</TD>
<TD>
Yes</TD>
</TR>

<TD> stands for table data - not as easy to remember as the others, but still, it does make some sense. And, as you can see, you ended that row with the </TR> tag. 

Before I let you loose to try it, you should temporarily close the tags on the page, save it and take a look. To do that -

</TABLE>
</BODY>
</HTML>

And name it "test7.htm" - be sure and return when you are finished admiring your page.

Now, look back up to where we added in the row about red. It has four lines to it -

<TR>
<TD>
Red</TD>
<TD>
Yes</TD>
</TR>

Every other row in this table will have those same four lines, with just "Red" and "Yes" changing. Why do I mention this? Because you, yes you, are now going to go back and add in rows for the other colors in the rainbow - orange, yellow, green, blue, indigo, violet. Since they are all "Yes" to whether they are in the rainbow or not, you just need to change "Red" to the next color for each row.

When you are finished with that, come on back and move on to the next step.

2003, Gnosis 4-H Club
The 4-H name and 4-H logo are service marks protected under 18 U.S.C. 707.

Questions? Comments? Problems? Contact the Webmaster!


Home