HTML Tutorial #4
Now we come
to something that on the face of it doesn't look very
useful but it is in fact probably one of the most useful
things you will ever have to learn although they are
difficult to code manually and are one of the few tasks
in HTML where a proper editor (I use FrontPage Express
because it's free) is an absolute must. I am referring to
tables. Here's what one looks like:-
Hang on. Where is it? To prove that there is something there, here's the code:-
<html>
<body>
<table border="0">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
So what's so useful about something you can't see? Because it helps you control where everything goes on a page. Take a look at the front page of any newspaper and you'll see text in columns. Try doing this in HTML and it just spreads across the page. Tables enable you to specify the width of a column and each cell can contain any HTML content. This page you are reading uses tables to control the layout. Alright, to put you out of your misery, I'll specify a boder width:-
<html>
<body>
<table border="1">
<tr>
<td>Hello!</td>
</tr>
</table>
</body>
</html>
| Hello! |
And there
it is this time containing some text. So, how is this
magic achieved. Note the <tr> and
closing </tr> tags which reside
within the <table> tags. The
tr means table row and obviously the table
tag specifies that this is a table. The nested <td>
tags are the table data which actually create the single
celled table above. However, we can have more than one
cell in a row:-
| Hello | there! |
and the code looks like this:-
<html>
<body>
<table border="1">
<tr>
<td>Hello</td>
<td>there!</td>
</tr>
</table>
</body>
</html>
If however,
we turn off the border (setting it to 0) produces this:-
| Hello | there! |
Not exactly
what we intended. We introduce spaces between content
using cell padding and cell spacing to produce this:-
| Hello | there! |
whick looks much better. Here's the code:-
<html>
<body>
<table border="0" cellpadding="1"
cellspacing="2">
<tr>
<td>Hello</td>
<td>there!</td>
</tr>
</table>
</body>
</html>
This also produces spacings above and below the content (in
this case text). So, how do we do another line? Here's
the code:-
<html>
<body>
<table border="1">
<tr>
<td>Hello</td>
<td>there</td>
</tr>
<tr>
<td>from</td>
<td><img src="jestbut.jpg" alt="Jester"></td>
</tr>
</table>
</body>
</html>
which looks like this on the page:-
| Hello | there |
| from |  |
or like
this without the border:-
| Hello | there |
| from | |
This tutorial has again only just scratched the surface of tables. They can for example be used to simulate frames or for displaying tables of data or links. As I said at the beginning, to get the most out of tables, you are going to need a proper editor. Constructing complicated tables using just Notepad is possible but it is a frustrating business. You have been warned. See you next time...
Please eMail me at: nickjc@nickjc.co.uk if you need help