3.18.2009

Basic Table for layout

I would like to explain several things regarding html basics which some people probably knew already or not. No matter, what you should know is that layouts of any website, I mean any website with good layout are organized in tables. Tables are easier to manage with specifying rows and columns. Rows are defined as <tr> and columns inside rows are <td>. So it will not show if you define <td> before <tr>. For a single row with three column will show as the following:

<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

which would look like:

-----------------
| a | b | c |
-----------------

Now, what would really look cool is if you have some sort of image or text which could appear right in the middle of the web browser no matter if the browser is resized, it could maintain the 'middle'-ness.

For that you can define tables to align everything to the middle.

For the record, there are several versions of HTML document definition which you could read from W3C, but basically, the higher the HTML version, the more features it has. The latest version to date is HTML version 4.01 which has cool features that you can read from W3C.

Unfortunately, when you create a HTML page in Dreamweaver whether blank or template, it defines the version of HTML as version 1.0. So what you need to do is change the DocType before the <head> tag by replacing everything before <head> with the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<!-- $Id: cover.html,v 1.2 1999/12/24 23:37:45 ijacobs Exp $ -->

If you do not however, the page height would not be detected since HTML version 1.0 does not include this feature therefore rendering the page to be aligned on top of the page.

Once completed, your HTML document will be recognized as version 4.01 which supports table height. Now once you create a table, you should set the height to 100% and set the column to align center and valign middle. The following example shows the text "Hello World" right in the middle of the page regardless setting the browser height by the visitor:

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center" valign="middle">Hello World</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Notice the table is set height and width to 100%, this means the table adjusts itself to 100% for the height of the browser and 100% for the width of the browser allowing it to fill the entire browser area. Notice also that the <td> align is set to center and valign to middle meaning that the content in that column is horizontally centered and vertically aligned in the middle. This example is a 3x3 table if you notice 3 <tr> (row) and 3 <td> (column) inside each <tr> (row).

Happy layout-ing!

0 comments: