1. หน้าแรก
  2. Design & Development
  3. HTML
  4. คุณติดอยู่ในโลกของ Table หรือไม่

คุณติดอยู่ในโลกของ Table หรือไม่ เขียนเมื่อ 2009.07.15 โดย

ไม่กี่ปีที่ผ่านมานี้ นักพัฒนาเว็บไซท์หลายๆ คนเปลี่ยนแปลงการออกแบบหน้าเว็บไซท์ด้วยโครงสร้างตาราง (Table) ที่ซับซ้อน มาเป็นการใช้โครงสร้างด้วย div แทน คุณรู้หรือไม่ว่าทำไมจึงเป็นเช่นนั้น

การใช้ตารางนั้นเป็นที่คุ้นชินของคนเรา เนื่องจากทุกวันนี้เราได้ใช้ข้อมูลในรูปแบบตารางต่างๆ มากมายจึงมีการใช้ในการออกแบบเว็บไซท์กันอย่างแพร่หลาย แต่ตารางเองก็มีปัญหาในเรื่องความยืดหยุ่น ในความเป็นจริงแล้วตารางถูกออกแบบ มาเพื่อการแสดงผลในรูปข้อมูลตาราง การทำมาใช้ในการออกแบบโครงสร้างเว็บไซท์นั้น จึงไม่ถูกตั้งแต่ต้นอยู่แล้ว และด้วยจำนวน tag ที่ถูกใช้ในการสร้าง กรอบข้อมูลกรอบหนึ่งที่ต้องใช้จำนวนถึง 3 tag (table, tr, td) และเมื่อมีการออกแบบโครงสร้างที่ซับซ้อนที่เป็นตารางซ้อนตาราง (Nested Table) เพื่อให้ได้การแสดงผลตามที่ต้องการนั้น ยิ่งทำให้เกิดการใช้ tag ที่ฟุ่มเฟือยมากยิ่งขึ้น ในการสำรวจสอบ MAMA (Metadata Analysis and Mining Application) ซึ่งเป็น Search Engine เพื่อวิเคราะห์โครงสร้างของเว็บไซท์ของ Opera นั้นได้มีการบันทึกไว้ว่า การใช้งานตารางในการออกแบบเว็บไซท์นั้นมีปริมาณ 82.47% ของเว็บไซท์ทั้งหมด และด้วยการสำรวจสอบ MAMA นั้นได้บันทึกข้อมูลไว้ว่ามีเว็บไซท์ที่ใช้ตารางซ้อนกันมากสูงสุดถึง 745 ชั้น

ในการออกแบบเว็บไซท์หนึ่งๆ ที่มีส่วนหัว ส่วนเนื้อหาที่แบ่งเป็น 2 column และส่วนท้ายของเว็บไซท์นั้นเราสามารถเขียนด้วยตารางได้เป็น
HTML
  1. <table cellpadding="0" cellspacing="0" border="0">
  2.     <tr><td colspan="2" height="120px" id="menu"></td></tr>
  3.     <tr><td valign="top" id="leftContent"></td><td valign="top" id="rightContent"></td></tr>
  4.     <tr><td colspan="2" id="footer"></td></tr>

แต่ถ้าเราเขียนด้วย div จะได้เป็น
HTML
  1. <div id="menu"></div>
  2. <div id="leftContent"></div>
  3. <div id="rightContent"></div>
  4. <div id="footer"></div>

จะเห็นได้ว่าการใช้ตารางในการออกแบบโครงสร้างนั้นต้องใช้จำนวน tag มากกว่าการออกแบบโครงสร้างโดยใช้ div มาก โดยอาจจะต่างกันถึง 1 เท่าตัว คุณอาจจะสงสัยว่าแล้วมันมีประโยชน์อะไร อย่าลืมว่าการแสดงหน้าเว็บไซท์นั้น Browser นั้นจะทำการโหลดเอกสาร HTML มาก่อนแล้วจึงโหลด media ต่างๆ ในเอกสาร ดังนั้นการลดขนาดของเอกสาร HTML ได้นั้นก็สามารถเพิ่มความเร็วในการเรียกดูเว็บไซท์ได้มาก

และในการทำ Search Engine Optimization (SEO) การออกแบบโครงสร้างด้วยตารางนั้น จะส่งผลให้ถูกจัดอันดับรองจากการออกแบบด้วย div เนื่องจากตัว Search Engine นั้นต้องใช้ตรรกะในการที่ซับซ้อนตามโครงสร้างของเว็บไซท์ไปด้วย

และการใช้การออกแบบโครงสร้างด้วยตารางนั้น มีความยืดหยุ่นน้อยกว่า ตัวอย่างเช่น เมื่อมีการพิมพ์หน้าเว็บไวท์การแสดงด้วยตารางนั้น จะสามารถจัดรูปแบบเพื่อการพิมพ์ได้ยากกว่าการใช้ div หรือไม่สามารถซ่อนเนื้อหาบางอย่าง เมื่อใช้ในการแสดงบนอุปกร์สื่สารเคลื่อนที่ต่างๆ

วันนี้คุณยังติดอยู่ในโลกของตารางหรือไม่



คำเตือนคำเตือน เนื้อหาต่างๆ ในบทความ รวมถึงรูปภาพทั้งหมดในบทความนี้ เป็นความเห็นส่วนตัวของผู้เขียนแต่ละคน ซึ่งแต่ละคนได้ทำการลงทะเบียน และเขียนบทความลงใน Modoeye Articles นี้โดยไม่มีค่าธรรมเนียมใดๆ บทความเหล่านี้เป้าหมายเพื่อการศึกษา และความบันเทิงเท่านั้น การนำส่วนหนึ่งส่วนใดของบทความไปใช้งาน ควรทำการอ้างอิงถึงผู้เขียนและแหล่งที่มาด้วย