|

Tables - A very good tool to
present your data
Tables are without any doubt very important
for any web designer. But it is not the simple <td>and <tr> I m referering to
but something deeeeeper. Read the article below to know more.
Akmal Khan Sapay
.2004.12.03.
You see our pages in different sections of Safis
Web and might wonder (let me imagine) how these were created. Well to be honest
without tables it wouldn't be possible. In this article I am NOT going to tell
you about creating tables. What I am going to tip about is creating tables INTO
tables. Sounds good? confusing? Read ahead.
So why do I need Tables INTO
tables?
Well creating tables is not at all hard. All you
need is the following HTML code:
<table>
<tr>
<td>
some data
</td>
</tr>
</table>
and voila, the table is created. But that is not
all, you are going to know more about Tables in order to create pages with menus
on one side, main part in the middle and maybe another menu on the right, just
like our pages. Well then you need to create Table into a table, how? see below:
<table>
<tr>
<td>
<table border=1>
<tr><td>this the table for left menu</tr></td>
<tr><td>link 1</td></tr>
<tr><td>link 2</td></tr>
<tr><td>link 3</td></tr>
<tr><td>link 4</td></tr>
</table>
</td>
<td> some data which is also the main part of your page. Now this text is really
not important here but I would just prolong it in order for the table to look
better.
</td></tr></table>
Now this simple HTML code will create two nice
tables. One which you can use for you left menu and the other for the main part
of your page. All this to put two item, which could be two images, two kind of
texts etc, parallell to each other.
The above table might not be clear enough unless we put border in it. Copy and
paste the following code, save it and then check it out.
<html>
<head>
<body>
<table border=2 width=50%>
<tr>
<td>
<table border=1>
<tr><td>this the table for left menu</tr></td>
<tr><td>link 1</td></tr>
<tr><td>link 2</td></tr>
<tr><td>link 3</td></tr>
<tr><td>link 4</td></tr>
</table>
</td>
<td align=middle valign=top> some data which is also the main part of your page.
Now this text is really not important here but I would just prolong it in order
for the table to look better.</td></tr></table>
</body>
</html>
Don't forget to go through the code and try to
understand it. It is really simple once you have your hands on it. Then you
should not stop here, experiment and make tables into tables and have fun!
----------------------
Akmal Khan Sapay
Multimedia Editor
Safis Web
----------
See Also:
SSI - Automate your menu
|