Well I said we would learn Tables next so here it is... This lesson will deal with the basic's of tables and how to arrange text and images using tables!

• <table> , </table> This is the main table tag
• <tr> , </tr> meaning table row
• <td> , </td> meaning table data
• <tc> , </tc> meaning table column

• The <table> , </table> tags mean that you are making a table inbetween these tags.
• The <tr> , </tr> tags mean that you are going to place a row of data cells.
• The <td> , </td> are the data cells in which you place something.(In this case the word "text")

Inside the table start tag we see: width="100%" border="10" .
The width="100%" means that it will use 100% of the width of the available space to make the table! I put the same script at the bottom of this page where it has more room, see how it used the whole width of the page! The examples at the top of the page do not use that command at all, so the tables were made as small as possible around the word "text"!

The border="10" means the size of the border, the examples at the top of the page use border= "1" . See the difference between the two, as far as I know, you can use any value you want. (Though using border="1000" would be kinda weird!)
If you want, you can change the color of the border by adding this: bordercolor="ffb903" , to get this:

text	text
text	text

Of course you can use your own colors!

By now your saying "Hold it! How come the table above doesn't use the whole width of the page?"
Well lets see if I can explain it... I'm using tables to position everything on this page and one of the tables has one table row with two table data cells in it! The resource column on the left is one data cell and this text on the right is another, so the width of the table is 100% of the width of this data cell, not the whole page!
Now your asking "How did you get the data cells to be two different sizes?" Well,Read on...

If we look at the Data start tags we see: align=left , align=center , align=right and a tag with just the td in it. Yep you guessed it the align= means to position everything in the data cell either left,center or right inside the cell. If there is no align command then it will align to the left!
Almost all of the commands used in the <table> tag can be used in the <td> tag and vice versa, so I can use the width="100%" command in the <td> tag, but you have to splt the percentage between the data cells. Below is an example of adding these: width="25%" , width="75%" to the first two <td> tags

width="25%"	width="75%"
text	text

I did not add that command to the last two <td> tags. Notice how the bottom two data cells fell inline with the top two! I did add this: bordercolor="ffb903" to the last two <td> tags!
Now on to the last two tags...

There is really not much to say about these tags,I haven't been able to do anything with the <tr> tag, but you can add the width="" command to the <tc> tag, but I find that just using the <tr> tag is easier for me so I dont use the <tc> tag at all! If you do use the <tc> tag, remember that the data cells are read top to bottom and not left to right as with the <tr> tag!

The examples below show a few ways to show images with the tables used on this page. All I did was insert image tags were the words "text" are!

I hope this lesson has been helpful,just remember these are by no means all of the tags you can use nor is this a complete list of things you can do with them! I hope in the future to cover more advanced HTML, for now please refer to the resources on the left side of this page!

Now go ahead and play around a bit, put tables within tables and see what you can do! After you have made a decent page and you want to know how to get it up and running using FTP , come back here and we'll discuss it!