TABLES


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!

TAGS

These are the basic tags used in tables:

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

Below is an example of the Table ( <table>, </table>) tags. (highlighted in blue)

text	text
text	text

Here is a couple of examples of the TABLE ROW (<tr>, </tr>) tags. (highlighted in blue)

text text text text

text text text text

Here is a couple of examples of the TABLE COLUMN (<tc>, </tc>) tags. (highlighted in blue)

text text text text

text text text text

Here Are Some examples of the TABLE DATA (<td>, </td>) tags. (highlighted in blue)

text text text text

text text text text

text text text text

text text text text

I added borders and Highlighted them to show you how tables look to the computer.
Below is an example of the same table with out borders.

text	text
text	text

Here is the script for the table below.
We will be using it for the rest of the lesson!

text	text
text	text

By now the script should be self explanatory.

• 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")

TABLE tags

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 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...

DATA tags

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...

TABLE ROW and TABLE COLUMN 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!

Using TABLES with IMAGES

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!

>>Printable Page<<