Mitzrah's Get IT Right Column!!
How To Deal with Tables
Updated : Thursday, August 06, 1998
 Mitzrah's Get IT Right Column!

BASIC SECTION

Right... tables! Basically a table looks like this :

   
   

You can put in anything in those tables, like images, text and it is really easy to make as well, tables are often used to control the layout of ones page. Tables can also be invisible like so:

Subject Title Other Links
Hi, this is an example of an invisible table! Isn't this cool? You can link out to other places from here!

You can't really see the borders there can you? Ok that's the introduction to this chapter now, we can head on to learn how a table is generated:

First off, if say you want to create a table, you need to do this: Draw out the table you want to make! So let's say I want to make a 3x3 table! Here we go:

<table><tr>
<tr>
<tr>
<td>        </td> <td>        </td> <td>        </td>
<td>        </td> <td>        </td> <td>        </td>
<td>        </td> <td>        </td> <td>        </td>
</tr>
</tr>
</tr></table>

This is an example of the HTML of a 2 x 2 table I have made!

<table border="#" cellspacing"#" cellpadding="#">
<!--- replace # for any number you like, 0 = invisible--!>
<tr>
<td>
Starts a new column!
</td>
<td>
Starts a new column!
</td>
</tr>
<tr> <!--this allows you to do another row!---!>
<td>
Starts a new column & row!
</td>
<td>
Starts a new column! on the second row
</td>
</tr><!--- closes the second row---!>
</table><!---- closes the table!---!>

And if you enter it as such, you will get this table, I used 3 for #

Starts a new column! Starts a new column!
Starts a new column & row! Starts a new column! on the second row

Do add more and feel free to experiment around with the tags to get a hang of it, more tags are explained below here in the ADVANCED section of tables.

ADVANCED SECTION

So, you feel confident that you can handle some rough and tumble? GOOD! Let us begin the process of arming you with the tools necessary to go the tabling and control the layout. Please read this table:

Attribute Place in which tag? Function
width="#" <table> This controls the thickness that the table's borders will show up. For example: This is with # = 7
   
cellpadding="#" <table> This controls the amount of invisible space which appears in each cell. If you specify a big number your columns and frames will be spaced out quite a bit. Example: this is with cellpadding = 8
See how padded this table looks?  
   
cellspacing="#" <table> This controls the space that is IN BETWEEN each cell. If you specify more than 0 you get a broken up table. Like in this case: the cellspacing = 10.
   
   
bgcolor="color" <table> or <td> This will control what color shows up in your cells. Or your whole table. This is an example with bgcolour="white"
 
background="image.ext" <table> or <td> This will specify what image is used as the background for that cell or table. It will only work with Netscape 4.xx and Internet Explorer 4.xx Ok I will now load up an image on the table below!
   
   
width="#" <table> or <td> This will specify the width of the table or the cell. Depending where you put it. The browser will always try to adhere to this command. You can specify absolute number of pixels by just this width="100" will set the width to 100 and if you specify this, width="50%" the table or the cell will take up 50% of the window.
150 pixels here! The rest goes here!
height="#" <table> or <td> This will specify the height of the table or the cell. Depending where you put it. The browser will take up more space and adjust accordingly if you specify this attribute too low.
align="justify" <table> or <td> This will control the HORIZONTAL aligment of the stuff in your table. Please substitute the word justify for the options listed below
Left center right
valign="justify" <table> or <td> This will control the VERTICAL aligment of the stuff in your table. Please substitute the word justify for the options listed below :
bottom middle baseline right

 

Notes from Alex:

If you found my guidance helpful, please drop a note by my guestbook! So I know that you have dropped by and benefitted from my efforts, it took me quite sometime to get these tutorial up! Click on home and then SIGN GUESTBOOK! I will also visit your homepage and will sign your guestbook too.

[ Emiri Nakayama | Sailor Mars, Rei | About Me | Photo Gallery ]
[ WWW Resources | HTML Tutorials | Hints & Tips | Banner Exchange ]
[ Awards | Win My Award | Home | Links | Change Music | E-Mail Me ]

 Back to where you came from!
[FrontPage HTML Markup Component][FrontPage HTML Markup Component][FrontPage Component]

LinkExchange Network
LinkExchange Member Free Home Pages at GeoCities