Div หรือ Table

ใน XHTML เขาแนะนำให้ใช้ Table-less ครับ หรือ ใช้ table(ตาราง) ให้น้อยที่สุด แต่ก็ไม่ได้ห้ามใช้นะครับ tag ที่เกี่ยวกับตาราง ก็ยังมีอยู่อย่างพร้อมมูล บน XHTML แต่บทความนี้ไม่ได้แนะนำให้ต้องใช้กับ XHTML เท่านั้นนะครับ เรายังสามารถประยุกต์ใช้ Table-less กับ HTML ทั่วไปได้

ผมก็ไม่ทราบว่าจริงๆแล้วทำไม เขาถึงอยากให้ใช้ div แทน table บางคนก็ว่า div เร็วกว่า table บางคนก็ว่า table ใช้งานง่ายกว่า div แต่สำหรับผมแล้ว ผมมองว่าการเลือกใช้ให้ตรงกับสถานะการณ์(อีกแล้ว) เป็นดีที่สุด

table ใช้ทำอะไร ? ตารางไงครับ ยังไง table ก็เอาไว้ทำตาราง ถ้าสิ่งที่ต้ิองการแสดงเป็นข้อมูลที่ต้องแสดงออกเป็นตารางแล้วละก็ ใช้ table เถอะ ง่ายกว่า div เป็นไหนๆ แต่ไหนๆจะใช้แล้วก็ใช้ให้ถูกหลัก(XHTML) ด้วยละกัน

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

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

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

ถ้าได้ view source เว็บไซต์ผม จะเห็นได้ว่าผมก็ยังใช้ table กับบางส่วนของเว็บไซต์อยู่ เช่น กรอบของเว็บ เหตุผลที่ผมเลือกใช้ table กับกรอบของเว็บ ด้วยต้องการให้มันโหลดให้เสร็จทั้งหมดแล้วแสดงผลในคราวเดียวนั่นแหละครับ เนื่องจาก table มันจะครอบเนื้อหาของเว็บทั้งหมดเลย ดังนั้น browser จึงต้องโหลดทั้งหมดให้เสร็จก่อนแล้วค่อยแสดง ซึ่งส่วนที่แสดงผล ก็จะเป็นส่วนที่คงที่ ซึ่งจะแสดงผลในทุกๆหน้าอยู่แล้ว และนอกจากนี้ ผมยังได้กำหนดขนาดของส่วนต่างๆให้คงที่ เพื่อที่เมื่อไรที่มีการแสดงผล ขนาดของมันจะไม่มีการเปลี่ยนแปลงครับ ไม่งั้นแล้วพอตอนกำลังโหลด กรอบที่กำลังโหลดอาจอยู่กลางจอ จนกระทั่งโหลดเสร็จทั้งหมด กรอบจึงจะไปอยู่ในตำแหน่งที่กำหนด ซึ่งผมไม่ค่อยชอบครับ
ผู้เขียน goragod โพสต์เมื่อ 05 พ.ย. 2551 เปิดดู 18,436 ป้ายกำกับ XHTML
^