Lesson 4
Tables
One way to organize your page, and make your images and text line up the way that you want it to is to put it into a table. We will take a look at the table tags and the attributes that you can use with them. We will also on this page discover how to create a layered background, which I use in many of my background sets. This is all done with the use of tables.
What are the tags necessary to create a table? First of all you need a <table> tag and a </table> tag. When ever you begin a table, you must have a closing tag. Each table is made up of rows and columns, as you see in the example below:
Directly after the <table> tag you will have the <tr> tag, indicating the start of a new row. Then you will have the <td> tag, which is where the table data goes. When you open the <tr> and the <td> they also need a closing tag.
Open your notepad and begin a new document. Put in the normal html tags that we learned in the lessons prior to this. Then we will put in the table tags for a three column table with two rows.
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
The square below contains a blank transparent gif image. You can't see it, but believe me it is there. I will put a border around it so that you can see where it is. Save this on your hard drive by right clicking and choose "save as".
<img src="blank.gif" width="50" height="20" border="0" alt="">
Now put the image tag for the blank image in between each one of your <td> and your </td> tags in your text editor. Did you notice that I didn't put anything in between the " and the " in the alt tag? I didn't forget... When you have a blank gif that is used as a place holder in a table, put in the alt tag, because every image needs that, but leave it blank between the " and the ". The browsers will read it and know that it is just a placeholder.
Now save your html document as tables.html on your hard drive. Bring it up in a browser window. You should have a table in your browser that looks just like this:
On the next page we will see how to change the width of our table and other attributes.
  
©2003 From the Heart Graphics and Web Design
All Rights Reserved
|