ccTuteButn.gif 1CCHead241.gif 1CTIPZ.gif
CHR02c.jpg
CHR05.jpgCHR05.jpg
FTP Tute
1bulletdiam.gif CHR05.jpgCHR05.jpg
HTML Page
1bulletdiam.gif
1bulletdiam.gif
CHR05.jpgCHR05.jpg
Tables 101
1bulletdiam.gif CHR05.jpgCHR05.jpg
Tables 102
CHR02c.jpg

"Thanks to Cool Cat for these original files"
CHR02c.jpg

Table Tutorial Page 2






Let's start with some simple table tags.
We will take this image and put it in a simple table.





Doesn't look like much does it? No border, no nothing.
That's okay because we will soon add to it. But for now here is the code I used;

<div align=center>
<table width="161" height="194">
<tr>
<td>
<img src="exsm.jpg" width="161" height="194">
</td>
</tr>
</table>
</div>


Notice how the source code for the table tag is on each line?
This is very important. It makes reading and checking for errors much easier.

Let's look at each line.

The first line is the div align=center tag. This centers the table containing the image. Use this code rather then the old "center" tags.

The next line we are defining the table with the table tag and specifying the width and height which, for now, is the same size of the picture.
The tr tag is used to define a row. We have no rows so we use an empty tr tag.
The td tag is the Table Data tag. Here is where we place the URL for our image along with the width and height of the image.
Now that we have our Table Data in place we must close the td tag with the /td tag.
Now close the Table Row tag with the /tr tag.
Then we close the Table with the /table tag.
And finally we close the div tag with the /div tag.

Notice how the table code flows?

We start with <table> then add the <tr> and the <td>
Then we close it in reverse order with </td> and </tr> and finally </table>


Let's continue to Page 3