HTML -- Lesson 3


Lesson 3



This lesson will show you a lot about tables.

<HTML>
<HEAD>
<TITLE>This is where you put the title</TITLE>
</HEAD>
<BODY>

<table border="1">
<tr>
<td>Box1</td>
<td>Box2</td>
<td>Box3</td>
</tr>
<tr>
<td>Box4</td>
<td>Box5</td>
<td>Box6</td>
</tr>
<tr>
<td>Box7</td>
<td>Box8</td>
<td>Box9</td>
</tr>
</table>

</BODY>
</HTML>


The above code will create a series of boxes like the ones below, their technical names are cells...

Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9



Lets break this code down into parts we can understand:


<table border="1">

This part tells HTML to create a new table. If you notice, the table looks similar to a tag, thats because it is a tag. It has an attached attribute, the {border="1"}. If you dont put an attribute with the tag {table}, it sets default values for border and other attributes that could be used with table. If we didnt set the border it would not have the lines that seperate the boxes from one another. You only have to add attributes when you want to manipulate the table.

Now lets look at the rest:

<tr>
<td>Box1</td>
<td>Box2</td>
<td>Box3</td>
</tr>

This is the base of the table. First we make a tag called <tr>. This tag makes a new row of cells. Since its our first one it will start the first row. Then we make the actual cell boxes, using the <td> tag. This will make boxes within the row tag <tr> and make as many cells as you want within it. Once you are done with that row to start a new row put the </tr> ending tag, and then write another <tr> tag and do the same thing.


</table>

Then we finish the table with the ending tag </table>, to tell the table we are done making more boxes. Without this tag it will mess up the website.


Extra Table Fun

Now we will show you some other ways to manipulate your tables.

<table border="5" cellspacing="0">
<tr>
<td bgcolor="#33FF33">Box1</td>
<td>Box2</td>
<td>Box3</td>
</tr>
<tr>
<td>Box4</td>
<td>Box5</td>
<td>Box6</td>
</tr>
<tr>
<td>Box7</td>
<td>Box8</td>
<td>Box9</td>
</tr>
</table>


Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9


These examples i will be showing you are pretty simple if you compare it to the first one we saw.

This example we have 3 new things:
If you notice the outside border of the table is a lot thicker than the first one, that is because we made the border="5" instead of just 1.
Next we add an attribute to the table, cellspacing, and we give it the value or 0. That will shrink the size of the border between the cells, but the only way to get rid of them is to also set the border to 0.
Then we give one of the cells a different background color, to do so we put an attribute bgcolor, in the first<td>, and set it to a color that is from the hexadecimal chart, which you can check out to the left. It will change that box and only that boxes background color.

Now i will stop boring you and give you examples on how to make cool tables....

<table border="0" cellspacing="0">
<tr>
<td rowspan=3 bgcolor="#006600">Box1</td>
<td bgcolor="#CC0000">Box2</td>
<td bgcolor="#006600">Box3</td>
</tr>
<tr>
<td bgcolor="#CC0000">Box4</td>
<td bgcolor="#006600">Box5</td>
<td bgcolor="#CC0000">Box6</td>
</tr>
<tr>
<td bgcolor="#006600">Box7</td>
<td bgcolor="#CC0000">Box8</td>
<td bgcolor="#006600">Box9</td>
</tr>
</table>
Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9
This example makes one of the cell's span across 3 of the rows, all you have to do is add the attribute rowspan= to one of the cell's you want to span.


<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#006600">Box1</td>
<td bgcolor="#CC0000">Box2</td>
<td bgcolor="#006600">Box3</td>
</tr>
<tr>
<td bgcolor="#CC0000">Box4</td>
<td bgcolor="#006600">Box5</td>
<td bgcolor="#CC0000">Box6</td>
</tr>
<tr>
<td bgcolor="#006600">Box7</td>
<td bgcolor="#CC0000">Box8</td>
<td bgcolor="#006600">Box9</td>
</tr>
</table>
Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9
This example shows the cellpadding attribute attached to the table tag. The big the number cellpadding the more space the cell box takes up.


<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#006600">Box1</td>
<td colspan=2 bgcolor="#CC0000">Box2</td>
<td bgcolor="#006600">Box3</td>
</tr>
<tr>
<td bgcolor="#CC0000">Box4</td>
<td bgcolor="#006600">Box5</td>
<td bgcolor="#CC0000">Box6</td>
</tr>
<tr>
<td bgcolor="#006600">Box7</td>
<td bgcolor="#CC0000">Box8</td>
<td bgcolor="#006600">Box9</td>
</tr>
</table>
Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9
This example shows the colspan attribute, it is just like the rowspan attribute except it is as you can see spanned across the columns not the rows.


<table border="0" cellspacing="0" cellpadding="5" background="YOUR_IMAGES_URL.jpg">
<tr>
<td>Box1</td>
<td>Box2</td>
<td>Box3</td>
</tr>
<tr>
<td>Box4</td>
<td>Box5</td>
<td>Box6</td>
</tr>
<tr>
<td>Box7</td>
<td>Box8</td>
<td>Box9</td>
</tr>
</table>
Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9
This example shows the background image attribute. Just put the attribute background in the tag table and put the URL of the image you want to use inbetween the quotes, dont forget to take away the bgcolor of cell boxes or you cant see the image completely.


<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td background="YOUR_IMAGES_URL.jpg">Box1</td>
<td bgcolor="#CC0000">Box2</td>
<td bgcolor="#006600">Box3</td>
</tr>
<tr>
<td bgcolor="#CC0000">Box4</td>
<td bgcolor="#006600">Box5</td>
<td bgcolor="#CC0000">Box6</td>
</tr>
<tr>
<td bgcolor="#006600">Box7</td>
<td bgcolor="#CC0000">Box8</td>
<td bgcolor="#006600">Box9</td>
</tr>
</table>
Box1 Box2 Box3
Box4 Box5 Box6
Box7 Box8 Box9
This example shows the same thing as the previous example, except you put the attribute, background, in one of the cell box tags.


Now thats the end of Lesson 3, you have learned most of which you can do with tables, youll have to experiment for the full effect. Use valign, align, and width attributes as well as the ones ive shown you for further effects.
Join Today
 
Join our Website's Jester Forum today!
Its FREE and easy......
Click Here
Advertisement
 
News
 
7-12-07
_____________________
Status: SITE OPENED

WELCOME!

Enjoy the STAY

If you enjoyed this page,
add 2 favorites or tell a friend

Daily Event
 
Fortune of the Day

Quick Search
 
Google:
Yahoo:
Excite:
Ads & News
 
 
39511 visitors
=> Do you also want a homepage for free? Then click here! <=