Learn HTML, Javascript, and C++

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:

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:

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.

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

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.

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.

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.

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.

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.