การออกแบบเว็บในยุคก่อน(ปัจจุบันก็ยังใช้กันอยู่)จะใช้ <table> ในการวางเลเอาท์ ดังตัวอย่างต่อไปนี้

  1. <html>
  2. <head>
  3. <title> my website </title>
  4. <meta name="keywords" content="joe bloggs’ website, site, pages,">
  5. <meta name="author" content="joe bloggs">
  6.  
  7. <link href="stylesheet.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10.  
  11. <table id="main">
  12. <tr><td>
  13. <img src="images/bla.gif" align="left" alt="layout image 1"><br />
  14. </td></tr>
  15. <tr><td>
  16. <h1>Welcome to my website</h1>
  17. <p>This is my wonderful website with funky content and groovy images!</p>
  18. </td></tr>
  19. </table>
  20.  
  21. </body>
  22. </html>

ซึ่งผิดวัตถุประสงค์ในการใช้งาน <table> เพราะ <table> ควรนำไปใช้แสดงข้อมูลในรูปตารางมากกว่าที่จะนำมาใช้ทำเลเอาท์ในเมื่อไม่ใช้ <table> แล้วเราจะใช้อะไรวางเลเอาท์ล่ะ? ทางเลือกก็คือ การออกแบบเว็บไซท์แบบ Tableless ชื่อก็บอกอยู่แล้วว่าไร้ตาราง คือ ใช้แท็ก <div> แทน <table> และใช้ภาษา style sheet เช่น css หรือ Cascading Style Sheets ในการจัดการกับแท็ก <div> เช่น จัดตำแหน่ง ขนาด สี เป็นต้น

ตัวอย่างต่อไปเป็นการนำตัวอย่างข้างบนมาแปลงเป็น tableless โดยการใส่ <div> แทน <table>

  1. <html>
  2. <head>
  3. <title> my website </title>
  4. <meta name="keywords" content="joe bloggs’ website, site, pages,">
  5. <meta name="author" content="joe bloggs">
  6.  
  7. <link href="stylesheet.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10.  
  11. <div id="image">
  12. <img src="images/bla.gif" align="left" alt="layout image 1"><br />
  13. </div>
  14. <div id="main">
  15. <h1>Welcome to my website</h1>
  16. <p>This is my wonderful website with funky content and groovy images!</p>
  17. </div>
  18.  
  19. </body>
  20. </html>

เราสามารถปรับแต่ง <div> ได้โดยใช้ css แต่เราจะต้องระบุ id หรือ class ให้กับ <div> ด้วย เพื่อใช้ในการอ้างถึงใน css

ตัวอย่างการใช้ id

  1. #image {
  2. float: left;
  3. width: 500px;
  4. }

หรือใช้ class

  1. .image {
  2. float: left;
  3. width: 500px;
  4. }

การเลือกใช้ก็แล้วแต่วัตถุประสงค์ในการใช้งาน ถ้ามี tag มากกว่าหนึ่ง tag ที่ใช้ ชื่อในการอ้างอิงว่า image ก็ควรใช้ class แต่ถ้ามีอยู่ tag เดียวที่ใช้ชื่อในการอ้างอิงว่า image ก็ใช้ id ได้

แล้ว Tableless มันดียังไง?
Tableless ช่วยลดจำนวน HTML tags ลงได้เป็นจำนวนมากเปรียบเทียบได้จากสองตัวอย่างข้างต้นตัวอย่างแรกใช้แท็กในการแสดงรูปดังนี้

  1. <tr><td>
  2. <img src="images/bla.gif" align="left" alt="layout image 1"><br />
  3. </td></tr>

แต่ตัวอย่างที่สองใช้

  1. <div id="image">
  2. <img src="images/bla.gif" align="left" alt="layout image 1"><br />
  3. </div>

ยิ่งถ้าเป็นเลเอาท์ที่มีความซับซ้อนมากๆ การใช้ <table> ก็จะยิ่งใช้แท็กจำนวนมากและยังทำให้สับสน ยากต่อการปรับปรุงแก้ไข และที่สำคัญ Tableless ช่วยลดเวลาในการโหลดหน้าเว็บ

Tableless Templates

เราได้เห็นกันแล้วว่า <div> มีความสำคัญต่อ css ซึ่งเรียกได้ว่าเป็นกล่องวิเศษเลยทีเดียว ต่อไปเราจะออกแบบเทมเพลทโดยใช้หลักการ tableless ให้ดูตัวอย่างเลเอาท์ที่ใช้ตารางต่อไปนี้ก่อน

header image
content column linkscolumn

หลายคนคิดว่าเป็นไปไม่ได้ที่จะใช้ css และ <div> แทน <table> ดังนั้นเราก็มาลองใส่แท็ก <div> เข้าไปในหน้าเว็บ 3 ตัว แล้วดูว่ามันจะออกมาเหมือนตัวอย่างข้างบนหรือไม่ คำตอบก็คือ ไม่เหมือนแน่นอน เพราะ <div> มีลักษณะเป็น block ทำให้ flow ของมันต้องเรียงลำดับกันลงมา ดังนั้นเราต้องใช้ css มาจัดการมันซะ และคุณจะต้องมีความรู้เกี่ยวกับ css มาบ้างแล้วถึงจะเข้าใจการทำ tableless ได้ โดยเฉพาะอย่างยิ่ง เรื่อง float

อย่างแรกเลยที่จะต้องรู้เกี่ยวกับ float คือเมื่อเรากำหนดให้ <div> float มันก็จะล่องลอยขึ้นไปข้างบน ไปจนชิดขอบของกรอบที่ครอบมันอยู่ (จะลอยไปติดขอบด้านไหนก็แล้วแต่ว่ากำหนดเป็น float:left หรือ float:right) ดังตัวอย่างด้านล่าง <div> ที่ float แทนด้วยสีน้ำเงิน

ตัวอย่างการออกแบบนี้จะจัดให้ทุกองค์ประกอบ(<div>ต่าง ๆ)อยู่ตรงกลางเพจ หากจะทำเช่นนี้ได้เราจะต้องสร้าง <div> ขึ้นมาตัวนึงเอาไว้ครอบ <div> ทั้งหมดในเพจ แล้วจัดตำแหน่งให้อยู่ตรงกลางเพจ ดังนี้

  1. <body>
  2. <div id="container">
  3.  
  4. </div>
  5. </body>

จากนั้นกำหนด <div id=”container”> ให้อยู่ตรงกลางเพจด้วยคำสั่ง css

  1. body {
  2. text-align: center; /* center things in pre-IE6 */
  3. }
  4. #container {
  5. margin: 35px auto;
  6. width: 500px;
  7. text-align: left;
  8. }

เพจที่เราสร้างจะออกมามีรูปร่างหน้าตาดังรูปนี้ container แทนด้วยสีน้ำเงิน

ต่อไปเพิ่ม <div> เข้าไปใน container เพื่อให้เป็นส่วนหัวของเพจ เพื่อให้เหมือนตัวอย่างเพจที่สร้างด้วย table ที่ได้กล่าวไว้ ส่วนนี้เป็นส่วนที่ง่ายที่สุดเพราะแค่ใส่ <div> เข้าไปแล้วกำหนด id ให้เป็น “header”

  1. <body>
  2. <div id="container">
  3.  
  4. <div id="header">    </div>
  5.  
  6. </div>
  7. </body>

สำหรับคอลัมน์ที่เหลือให้ใส่ <div> เข้าไปอีกสองอัน ดังตัวอย่างนี้

  1. <body>
  2. <div id="container">
  3.  
  4. <div id="header">    </div>
  5.  
  6. <div id="content">  blabla content  </div>
  7.  
  8. <div id="sidebar">  blabla links  </div>
  9.  
  10. </div>
  11. </body>

จากที่เราได้กำหนดให้ container มีความกว้าง 500 พิกเซล ดังนั้นความกว้างของ 2 คอลัมน์ที่เราเพิ่งใส่เข้าไปจะต้องรวมกันแล้วไม่เกิน 500 พิกเซล ในที่นี้จะกำหนดให้ content กว้าง 380 พิกเซล ส่วนที่เหลือ 120 พิกเซลเป็นความกว้างของ sidebar นำค่าที่คำนวณได้ไปกำหนดให้กับ css ดังนี้

  1. #container {
  2. margin: 35px auto;
  3. width: 500px;
  4. }
  5. #header {
  6. width: auto;
  7. }
  8. #content {
  9. width: 380px;
  10. }
  11. #sidebar {
  12. width: 120px;
  13. }

เพจที่ได้จะออกมาเป็นดังรูปต่อไปนี้ (สีแดงคือ header สีเขียวคือ content สีชมพูคือ sidebar)

เราต้องกำหนด float ให้แต่ละคอลัมน์เพื่อให้ คอลัมน์อยู่ในตำแหน่งที่ถูกต้อง ดังนี้

  1. #content {
  2. float: left;
  3. width: 380px;
  4. }
  5. #sidebar {
  6. float: right;
  7. width: 120px;
  8. }

ในที่สุดแต่ละส่วนก็อยู่ในตำแหน่งที่ถูกต้องดังรูป

คอลัมน์ทั้งสองจะอยู่คนละด้านกันและจะไม่หลุดออกจากกรอบ(container) แต่ถ้าเรากำหนด padding, margin หรือ border ให้แต่ละคอลัมน์เราจะต้องนำค่าที่กำหนดให้กับ padding, margin หรือ border มาลบออกจากความกว้างคอลัมน์ที่เรากำหนด padding, margin หรือ border

ปัญหาที่พบ คือ บางเบราเซอร์ไม่แสดงพื้นหลังที่ <div> ที่กำหนด float ไว้ วิธีแก้คือ เพิ่ม <div> ก่อนที่จะปิดแท็ก container ซึ่งก็คือ footer นั่นเอง

  1. <div id="sidebar">  blabla links  </div>
  2.  
  3. <div id="footer">    </div>
  4.  
  5. </div>
  6. </body>

ใส่คำสั่ง clear ใน stylesheet

  1. #footer {
  2. clear: both;
  3. }

References: