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>
|
|
|
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.
|
|
|
|
|
The complete code is now:
<table border=0><tr>
<td valign="top" align="left">
|
|
|
<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>!
|
|
|
|
|
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 |
