โค้ด Layout หน้าเว็บผม ยังใช้เป็นตารางอยู่ครับ ด้วยเหตุผล 2 ประการ

1.เนื่องจากเว็บมันแบ่งกรอบออกเป็น 3 ส่วน คือ ซ้าย ตรงกลาง และ ขวา ถ้าผมใช้ div แต่ละส่วนมันจะมีความสูงเป็นอิสระต่อกัน ซึ่งผมต้องการให้ทั้ง 3 ส่วน สูงเท่ากันเสมอ (ไม่รู้วิธีกำหนด) ทำให้ผมต้องกลับมาใช้ตาราง 1 แถว 3 คอลั่มน์ แทน
2.ตาราง จะทำให้เว็บต้องรอโหลดเนื้อหาภายในตารางให้สมบูรณ์ก่อนถึงจะแสดงผล ซึ่งเป็นข้อดีที่ผมต้องการ เนื่องจากเว็บผมเป็น AJAX ดังนั้นข้อมูลที่ผมต้องรอโหลดในเบื้องต้นจะไม่มากนัก ทำให้ผมสามารถแสดงผลได้สำเร็จภายในคราวเดียว (ผมไม่ค่อยชอบเว็บที่ค่อยๆโหลดมาแสดงทีละนิด เนื่องจากมันทำให้ดูเหมือนว่า เว็บช้า)

<table id="maintable" cellpadding="0" cellspacing="0"><tr>
  <td id="ltd"></td>
  <td id="mtd">
    <table id="subtable" cellpadding="0" cellspacing="0">
    <!--Logo-->
    <tr><td id="logo"><img src="../images/logo.gif" alt="g-O-r-a-g-o-d.com" /></td></tr>
    <!--เนื้อหาของเพจ-->
    <tr><td id="content">
      content
    </td></tr>
    <!--ส่วนล่าง-->
    <tr><td id="footer">
      footer
    </td></tr>
    </table>
  </td>
  <td id="rtd"></td>
</tr></table>

ลองมาดูการกำหนด CSS ให้กับส่วนต่างๆกัน

* { /* รีเซ็ต padding และ margin ทั้งหมด */
  padding:0;
  margin:0;
}
body { /* กำหนดพื้นหลังให้กับเว็บเพจ */
  background-color:white;
  background-image:url(../images/f_bkg.jpg);
}
#maintable { /* กำหนดความกว้างของตารางหลักให้เต็มเพจเสมอ */
  width:100%;
}
#subtable { /* กำหนดความกว้างของตารางรองให้เต็มเพจเสมอเช่นกัน */
  width:100%;
}
#logo { /* พื้นที่แสดง logo */
  background-image:url(../images/logo_bkg.gif); /* กำหนดพื้นหลังให้เป็นรูปส่วนที่ซ้ำกัน(ภาพพื้นของ logo) */
  text-align:left; /* เพื่อให้ logo ชิดซ้ายเสมอ */
}
#ltd { /* พื้นที่ขอบด้านซ้ายมือที่เป็นเงา สีดำ */
  background-image:url(../images/l.gif);
  width:12px;
}
#mtd { /* พื้นที่ตรงกลางสำหรับเนื้อหา */
  width:auto;
}
#rtd { /* พื้นที่ขอบด้านขวามือที่เป็นเงา สีดำ */
  background-image:url(../images/r.gif);
  width:12px;
}
#footer { /* ส่วน footer */
  background-image:url(../images/bottom.gif);
  background-repeat:repeat-x;
  text-align:center;
}

ทำไมผมต้องใช้ตารางถึง 2 ชั้น ตารางแรก (maintable) จะประกอบด้วย ตาราง 1 แถว 3 คอลัมน์ คือ เงาด้านซ้าย เงาด้านขวา และพื้นที่ตรงกลาง ซึ้งพื้นที่ตรงกลางนี้จะมีตารางอีกตารางอยู่ภายใน (subtable) ซึ่งตารางนี้จะแบ่งเป็น 1 คอลัมน์ 3 แถว ครับ โดยแถวแรกจะเป็น logo แถว 2 จะเป็นเนื้อหา และ แถว 3 เป็น footer ครับ

ลองดูเทคนิคที่ผมใช้กับ logo ครับ ผมกำหนดให้พื้นที่ส่วนนั้นมีพื้นหลังเป็นรูปพื้นหลังของ logo ครับ แล้วผมก็ทำ logo แค่ส่วนที่พอดีกับตัวอักษร(ดูจาก logo หน้าเว็บเลย) โดยที่ไม่ต้องทำให้มีขนาดใหญ่ตามจอภาพ แล้วก็จัดให้ logo ชิดซ้ายเสมอ ทีนี้ไม่ว่า จะมีใครเข้าเว็บด้วยขนาดจอเท่าไรก็ตาม ทุกคนจะเห็นว่า logo เต็มจอเสมอ

ตัวอย่าง