written by Cynthia Fridsma

In the previous issue I recommended that you should avoid the use of frames because search engines aren’t compatible with them and you might loose some visitors. I also explained that you should start on paper before working anything out on your computer.

Now we’ll step forward to the next step:
Learn to use tables for your homepage

Before you start, you should think about using tables because your can control your layout better with the use of tables. It’s no problem if you have never used tables before, because I will explain them down beneath with the HTML codes.

First you need to open a text editor (like notepad) and start to define your table. To use 'notepad' on a ms-windows based computer, you have to click on <start>, choose 'run', then type notepad and press on <Enter>


Write down (or copy & past) the following code:

<table border=0>

That’s the first line. If you want to use a border, you can change the value 0 into a different number.
Define the row and type the following code:
<tr>

The complete code is now:
<table border=0><tr>

Okay, that’s a start. Now we’re moving to the next step: define a column. Type the following code:
<td valign="top" align="left">

With the code valign=“top“ we’re telling that the text should start on top of the frame. Other options are: valign=“middle“, the text should start in the middle of the frame and valgin=“bottom“ the text should start on the bottom of the frame

With the code align=“left“ we’re telling that the text should start on de eft side of the frame. Other options are: align=“right“, the text should start on the right side of the frame and align=“center“ , the center the text in the middle of the frame.

The complete code is now:

<table border=0><tr>
<td valign="top" align="left">

Got it? Good. Now you can type your text, lets say: Hello world. And put the text “How are you doing today?“ on the next sentence, using the code for ‘Return’.
Hello world<br><br>How are your doing today

<br> stands voor a line break. You can also use <p> for a paragraph (if you have a lot of text). But if you are using the paragraph tag, than you have to end the tag as well, using </p>!

The complete code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?

Now we have to define the end of the column. Type the following code:
</td>
We start a new column, define the column a second time.

The complete code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left">

Type a paragraph:
Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!

The complete code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p>

Define the end of the column.
The complete code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p></td>

Now we want to define a new row, which means that we first have to close the old row and then defining a new one. To define a row, we use the code <tr>, but first we must end a row, using the code </tr>

The complete code is now:
<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top' align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p></td>
</tr><tr>
<td valign="top" align="left"> <img src="http://www.heathernova.us/images/36586_462.jpg">

Close the column and define new column.

The complete code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p></td>
</tr><tr>
<td valign="top" align="left"><img src="http://www.heathernova.us/images/36586_462.jpg"></td>
<td valign="top" align="left">

Now type a paragraph with the following text:
Here you see a picture from Heahter Nova. She’s a great artist and I just love her music. Vist the ‘Online Magazine’ on the internet to find out more

The complet code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p></td>
</tr><tr>
<td valign="top" align="left"><img src="http://www.heathernova.us/images/36586_462.jpg"></td>
<td valign="top" align="left"><p> Here you see a picture from Heahter Nova. She’s a great artist and I just love her music. Vist the ‘Online Magazine’ on the internet to find out more</p>

Now we’re going to define a hyperlink, using the code : <a href="hyperlink" target="blank">hyperlink</a> and we’re going to refer to http://www.heathernova.us (that’s us alright "-) ). The option target="blank" means that we’re going to open the hyperlink in a new browser window. If you want the hyperlink to be opened in the same window, then leave the target="blank" away: <a href="hyperlink">hyperlink</a>.

The code should be:
<a href="http://www.heathernova.us" target="blank">http://www.heathernova.us</a>

The complet code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p></td>
</tr><tr>
<td valign="top" align="left"><img src=http://www.heathernova.us/images/36586_462.jpg></td>
<td valign="top" align="left"><p> Here you see a picture from Heahter Nova. She’s a great artist and I just love her music. Vist the Online Magazine’ on the internet to find out more</p>
<a href="http://www.heathernova.us" target="blank">http://www.heathernova.us</a>

Okay, close the column, the row and the table. Use the folowing code:
</td></tr></table>

The complet code is now:

<table border=0><tr>
<td valign="top" align="left"> Hello world<br><br>How are your doing today?</td>
<td valign="top" align="left"><p> Now, I have learned the basics of a table. It’s not to difficult. I always thought that it would be to difficult to learn. But no, I can handle it quite well!</p></td>
</tr><tr>
<td valign="top" align="left"><img src=http://www.heathernova.us/images/36586_462.jpg></td>
<td valign="top" align="left"><p> Here you see a picture from Heahter Nova. She’s a great artist and I just love her music. Vist the Online Magazine’ on the internet to find out more</p>
<a href="http://www.heathernova.us" target="blank">http://www.heathernova.us</a>
</td></tr></table>

Save the result as : „table.html“ (ascii text format) on your desktop and double click on table.

That’s it for now.

Click here to see how the table looks