Saturday, February 24, 2007

Tables inside Tables - HTML design trick


Making a web page look good and work on all Browsers is not easy. Especially if you are using javascript ;). But...how can you make a web page entirely out of tables, and make it perfect at the same time?
Creating tables one inside of each other and setting everything right can make wonders.
First you must make a table with the border of 0 (border="0") and make the with and height of the page (of the table) at 100% (width="100%" height="100%"). Also very important , you must always set the cellspacing and cellpadding to 0 (cellpadding="0" cellspacing="0"). The table will now look like this:

< border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
Right now, you have a table that is as wide and as tall as the browser's page is. now, very important, to continue, you must make the properties set to the center and aligned to the middle or the top like so:< align="center" valign="top">. Inside the <> you must place now another table just like the one in the first example, but you must get the width="100%" height="100%" out! so it will look like this:
< border="0" cellpadding="0" cellspacing="0">
Right now, you have a table including another table, and the second table is on the top center of the page. Once you add data to that table it will become wider. You can include as many tables as you want in the second one....and make as many separate <>'s as you want.
Including one table in the other is very useful. You can position any content where ever you want to. For example, if you want to make the top-center table of 400 width, you just set the width="400" of the <> that includes the table and the content of the table will now be wider.A very important thing once you set a width or a height property is....if you want the content to go down, in stead of right, you must set the nowrap="nowrap" . Try it!
Let me know if there are any questions ;).

3 comments:

Anonymous said...

Question(s):

Have you ever heard of CSS? Web standards? Minimal markup? Separating content from style?

cy21 said...

yes..of course I've heard. But this is something that you don't need work a lot to make it work on all browsers ;)

Somjang said...

แอส ข้อมูลลง ฐาน ข้อมูล ไม่ได้ มีแต่ แถว ขึ้นมา แต่ ข้อมูล ไม่มี มัน เกิดปํญหา ที่ตรงไหน
ทดลอง ดู แล้ว หลายอย่าง เช่น echo ตัวแปร echo post
ออกมาก็ไม่เห็น มีอะไร ผิดปกติ