Home Home Contact Language Videos Photo Gallery Tourdates Wikipedia Software & Education Route planner Articles News service Postcards Shop Heather Nova albums Movies - trailers etc. Creativity Archive Personal Funny Cartoons Downloads Book reviews Mail Site credits HN Mailing list heathernova.de Links Save our world FAQ Let us know what you think Heather Nova tweets Guestbook Heather Nova on Youtube
Basic Chords The E Shape The A Shape The D Shape The C Shape The G Shape Mutlitrack recording on your computer Video editing Webdesign - tips Promote your homepage What is a table? 3D Art Fairy Creating an animation The fairy comes alive Guitar lessons Video lesson : learn to play Walk this world Walk this world, interactive Songwriting Competition ReadSpeaker Like lovers do Like lovers do - medium quality Like lovers do - flash Webserver security LondonRain -chords LondonRain-video How to encourage your own creativity PHP tips and tricks

What is a table?

Tables

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>




 

Define the row

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>




 

Click on start and then on 'run'

Other options are: valign=�middle�

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.




 

type notepad and press on the enter button

 

The complete code is now:

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




 

Now you have started Notepad

<br> stands voor a line break.

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




 

Notepad - a perfect editor to learn the basics of HTML. Type the code as mentionted in this lesion.

 

The complete code is now:

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




We start a new column

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

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 a new row

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

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

Tables

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>




 

Define the row

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>




 

Click on start and then on 'run'

Other options are: valign=�middle�

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.




 

type notepad and press on the enter button

 

The complete code is now:

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




 

Now you have started Notepad

<br> stands voor a line break.

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




 

Notepad - a perfect editor to learn the basics of HTML. Type the code as mentionted in this lesion.

 

The complete code is now:

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




We start a new column

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

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 a new row

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

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