div หรือ table

กับคำถามมากมายว่า DIV หรือ TABLE มันดีกว่ากันยังไง มันจะใช้แทนที่กันได้ยังไง หลายคนที่ยังสงสัย ตอนนี้ผมมีข้อมูลเล็กๆ น้อยๆ มาแจกจ่ายกันบ้าง อาจจะไม่กระจ่างมาก แต่คงพอถึงบางอ้อ

เรื่องมันมีอยู่ว่า

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

ปัจจุบัน คำว่า Tableless Design หรือการทำเว็บแบบพึ่งพา table ให้น้อยที่สุด หรือไม่ต้องใช้เลย อาจจะแพร่กระหลายในหมู่คนทำเว็บต่างประเทศอื่นๆ โดยเฉพาะฝั่งยุโรป แต่ในเมืองไทยยังไม่เป็นที่นิยมมากนัก เพราะต้องการใช้เวลาในห้วงระยะหนึ่งในการทำความเข้าใจ เรียนรู้มากพอสมควร ทั้งในเรื่องของ XHTML, XML เพื่อที่จะสามารถเข้าใจหลักการทำงานพื้นฐานได้ ถึงแม้โครงสร้างภาษาจะไม่แตกต่างจาก HTML มากมายก็ตาม

ต้องใช้ DIV ทั้งเว็บใช่หรือไม่

คำตอบคือ ใช่ และไม่ใช่

อย่างไร

ถ้ากรณีที่เว็บของเราที่ทำขึ้นมานั้น ไม่ได้มีการแสดงผล แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel ก็คงไม่จำเป็นต้องมี table ครับ แค่ DIV และ อย่างอื่น ก็ทำเว็บได้

แต่ ถ้าเมื่อใดที่เราต้องแสดงผลแบบเป็นแถว เป็นคอลัมน์ เรายังต้องใช้ table อยู่ นั่นเอง

ด้วยคุณสมบัติและลักษณะที่แตกต่าง จึงไม่สามารถเอามาใช้แทนกันได้

แค่เพียงเราเลือกใช้ให้ถูกวิที แค่นั้นเองครับ

อย่าลืมว่าเรายังมี span, em, abbr, h1-h6, p, li , dd, dt และอีกสารพัดอย่างที่เราต้องนำมาใช้ให้ถูกวิธี

** อัพเดทล่าสุด 20 พฤษภาคม 2550

*** แก้ไข 13 มกราคม 2551

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0
Tweet 20
fb-share-icon20

Back to Top

0 Responses to div หรือ table

  1. O_O

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

    ของบางอย่างทำมาเพื่อบางอย่าง ก็ไม่ได้หมายความว่าเอาไปทำอย่างอื่นไม่ได้

    ของบางอย่างมีไว้สำหรับทำหลายๆอย่าง ก็ไม่ได้หมายความว่า มันทำได้ดีทุกอย่าง

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

    Reply

  2. O_O

    อ่อ ลืมบอก สีพื้นแบบเดิม ผมว่าสบายตากว่านะ สีนี้มันไม่เข้ากับสีฟ้อนท์

    แล้วฟ้อนท์ tahoma ผมว่ามันไม่สวย วิธีจัดการมันมีถ้าไม่ใช่ IE7

    แล้วแต่มุมมองนะ อันนี้มุมมองของผม

    Reply

  3. พร อันทะ

    ครับผม เดี๋ยวผมจะลองเอาแบบที่ผม คิดไว้ก่อนหน้านี้ดู

    ผมรีบวิ่งหนีบางอบ่างเมื่อเช้า ก็เลยยังไม่ได้แก้ไขอะไรมากมายเลย

    Reply

  4. rookiedz

    ยังไม่เข้าใจครับ

    งงงง……….

    สรุปว่า จะใช่ table ในตอนใหน หรือเหมาะกับอะไร

    หรือ div จะใช้งานกับเว็บประเภทไหนดี งง

    Reply

  5. ตรงนี้

    "ถ้ากรณีที่เว็บของเราที่ทำขึ้นมานั้น ไม่ได้มีการแสดงผล แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel ก็คงไม่จำเป็นต้องมี table ครับ แค่ DIV และ อย่างอื่น ก็ทำเว็บได้

    แต่ ถ้าเมื่อใดที่เราต้องแสดงผลแบบเป็นแถว เป็นคอลัมน์ เรายังต้องใช้ table อยู่ นั่นเอง "

    Reply

  6. iannnnn

    ผมถนัดที่จะใช้ Table วางโครงหน้า

    แล้วใช้ Div กำหนดรายละเอียดปลีกย่อยครับ

    รู้สึกว่าเป็นการผสมผสานที่ลงตัวดี ที่สำคัญคือไม่เจอปัญหากับ IE นัก (ชิ)

    Reply

  7. artofid

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

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

    Reply

  8. TripleX

    ก็อีกอย่างนึงที่(คิดว่า)divดีกว่าtable คือถ้าสมมติคุณมีอะไรก็ตามที่โดนtag table ครอบไว้อยู่ ทุกสิ่งจะต้องรอโหลดจนเสร็จ จึงนะแสดงหน้าตาของtable นั้นๆ ยิ่งถ้าข้อมูลทั้งหน้าถูกtableใหญ่ครอบไว้ทั้งหมด ก็ต้องรอโหลดจนเสร็จทั้งหมดกว่าจะเห็นทั้งหน้า แต่ถ้าเป็นdiv จะแสดงเป็นก้อนๆเมื่อก้อนใดเสร็จbrowserก็จะเห็นเป็นส่วนๆไป ซึ่งจะดูดีกว่าคือค่อยๆโหลดแสดงขึ้นมาทีละก้อน ตัวอย่างลองดูจากhttp://www.yenta4.comhttp://www.maxnetsquare.comพวกนี้จะจัดหน้าเป็นdivเกือบทั้งหมด

    Reply

  9. โดม

    เขาปรับเปลี่ยน วิธีการ ตามมาตราฐาน ที่เปลี่ยนไปมากกว่าครับ จะใช้ Table หรือ Div ก้อได้แต่ถ้าดูกับ Device อื่นไม่ได้ สิ่งที่สร้างมามันก็ไม่ประโยชน์ เช่นเวบคุณดูได้แต่ IE บน Computer แต่ดูด้วย PDA ไม่ได้มันก็ไม่มีค่าอะไร เขาจึงกำหนดมาราฐานมานั่นเอง ว่าทำตามเขา Browser ที่เขียนตามมาตราฐานของเขา (W3C)สามารถดูเวบของคุณได้ทุกอุปกรณ์

    Reply

  10. gooogolf

    designing with web standards ให้ได้ก่อน แล้วค่อย "แนว" ดีกว่านะผมว่า

    แต่ ณ วันนี้ แนวๆ ก็ยังไม่ได้้ standard ก็ยังไม่ถึงเลย T-T ก็เลยได้แต่ hybrid แบบ ค.ห. 9 ว่าไปพลางๆอ้ะ

    แต่คุณประโยชน์ของ tableless design ก็ตาม ค.ห. 10, 11 ใช่เลยฮะ

    Reply

  11. Ivy

    I would love it this site to be in English format, too. Ouy!

    Reply

  12. rookiedz

    ความเห็นผมน่ะคับ ผมว่า div น่าจะดีกว่า น่ะครับ เพราะมันเร็ว แล้วก็มันทำให้รอยยักในสมองผม เพิ่มขึ้นทุกครั้งที่ทำ อิอิอิ

    Reply

  13. dogdoy

    ผมเพิ่งจะลองเปลี่ยนมาใช้ div + css กับเค้าดูบ้าง

    ข้อที่ผมชอบเห็นจะเป็นลักษณะการโหลดของหน้า คือถ้าออกแบบเป็น 3 column ถ้าใช้ table มันจะโหลดจากด้านซ้ายก่อน แล้วมันก็จะแสดงแบบกว้างๆเต็มตัว table

    แล้วพอ column กลางโหลดมามันถึงจะมาจัดตัวเองอีกที ซึ่งดูแล้วมันเละๆยังไงไม่รู้

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

    ชอบ CSS อีกเรื่องนึงคือการที่เราสามารถเขียน CSS ให้เหมาะกับการชมบนหน้าจออุปกรณ์ต่างๆได้โดยที่ไม่ต้องแก้ตัวข้อมูล html เลย

    Reply

  14. gonGGang

    ผมก็ลอง ๆ แต่ยังไม่ค่อยเข้าจัยนัก

    Reply

  15. ต้น

    ถ้าถามผมว่าอันไหนดีกว่าผมว่า DIV ดีกว่านะครับ ไม่ว่าจะเป็นเรื่องของการทำ SEO เอง หรือ Code ที่เล็กกว่าก็ดี แต่ถ้าถามถึงความยากง่ายในการทำนั้นผมให้ Table ง่ายกว่าครับ เพราะฉะนั้นเวลาที่จะทำเว็บไซต์ก็ ต้องดูก่อนครับว่าเป็นเว็บประเภทไหน เช่นถ้าลูกค้าไม่ได้ต้องการอะไรมากแค่อยากให้มีเว็บเอาไว้ประกอบกับ ธุรกิจ Offline ของเขา และต้องการแบบเร็วๆผมก็ใช้ Table ครับ แต่ถ้าลูกค้าต้องการทำเกี่ยวกับ SEO ด้วยก็ค่อยใช้ DIV ครับ เพราะมันยากกว่านะ ก็เลยต้องเฉพาะกิจกันหน่อย จะได้เห็นคุณค่ากันหน่อย หุหุ

    Reply

  16. doo_doo

    ติดตามอ่านครับ แม้ผมจะเกลียดมันมากก็ตาม แต่ผมก็ต้องศึกษามันครับ

    Reply

  17. Tarn

    ว่าแต่divมันคืออะไรอ่ะครับแบบว่าผมทำกราฟฟิกมาตลอดไม่รู้จักเพิ่งลองทำเว็บแต่อยากศึกษาระบบcssอ่านไปแต่งง

    Reply

  18. ผ่านมา

    Div นั้นย่อมาจาก Division หรือ ภาคส่วนนั่นเองครับ ใช้สำหรับแบ่งเอกสารออกเป็นส่วน ๆ เช่น ส่วนเมนู ส่วนเนื้อหา ส่วนที่อยู่ติดต่อ ฯลฯ เป็นลักษณะของ Containing Element

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

    Reply

  19. ิีืbunkul

    ดีเยี่ยมมาก ๆ เลยครับ เว็บนี้ ปรบมือให้เลยครับ พัฒนาข้อมูลให้เยอะ ๆ นะครับ

    Reply

  20. Seven

    ผมมองอีกทางนะครับ

    xhtml มันเหมือนเป็นข้อมูลครับ สำหรับผม

    css เป็นรูปแบบการ design ครับ

    เพราะฉะนั้นต่อไปถ้าเราต้องการจะแก้ไขหน้าตาเว็บเราก็เพียงแค่แก้ใน css (กรณีที่เป็น external นะครับ)

    มันคล้ายๆ กับ XML น่ะครับที่เป็นแค่ตัวข้อมูลส่วนตัว interface จะเป็นอะไรก็ได้ขึ้นอยุ่กับว่าจะใช้อะไรมารับข้อมูลตรงนี้ ไม่ว่าจะเป็น webpasge หรือ windows form ก็ได้ เพราะถ้ามีมาตรฐานแล้วเราก็มั่นใจได้ระดับหนึ่งครับ

    css zen garden ทำให้เกินแนวความคิดนี้จริงๆ ครับ แต่ว่าผมก็เขียน css ไม่เก่งนะครับ ถึงใครบอกว่ามันเป็นน้ำจิ้มก็เถอะ แล้วถ้า 3.0 รองรับกันมากกว่านี้น่าจะมีลูกเล่นมากขึ้นนะครับ

    Reply

  21. ฝ้าย

    ความคิดเห็นที่16

    ความเห็นผมน่ะคับ ผมว่า div น่าจะดีกว่า น่ะครับ เพราะมันเร็ว แล้วก็มันทำให้รอยยักในสมองผม เพิ่มขึ้นทุกครั้งที่ทำ อิอิอิ

    "ตามความเห็นที่ 16 ช่วยให้รอยหยักในสมองเพิ่มขึ้น" ทำให้ตัดสินใจอย่างเด็ดขาดว่าจะ จะพยายามใช้ div ในการทำเว็บให้มากขึ้นเพื่อเพิ่มรอยหยักค่ะ .. เอาจิงละเน้อ

    Reply

  22. beer

    พี่พร ฝาหรั่ง เค้าอยากอ่านเว็บพี่อ่ะ อิอิ

    Reply

  23. HighEnD

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

    Reply

  24. Luckyo

    ขอบคุณความรู้ครับ แอบชอบสำนวนที่ใช้เขียนมากเลยครับ

     

     
    ^^ เป็นกำลังใจให้พัฒนาต่อไปครับ

    Reply

  25. mamee

    โอ้ว คอลัมน์นี้แลที่ตามหามานาน

     
    อยากจะหาวิธีใช้ DIV แทน Table มานานแล้ว

     
    เว็บมันใหญ่ ต้องรอโหลดทั้งก้อน จะแก้งูๆปลาๆก็ใช่ที่

     
    ขอบคุณคับ

    Reply

  26. bank

    ผมใช้ผสมกันน่ะครับ ชอบทั้งคู่อยู่ที่ลักษณะผลที่แสดงออกมาว่าควรใช้อะไรมากกว่าน่ะครับ

    Reply

  27. หมูพี

    ที่คนใช้ table เพราะมันง่าย แต่คนใช้ div เพราะเทพเขาใช้ div

    Reply

  28. auncheit

    ไอ้ผมมันมือใหม่สุดๆ ปวช ยังไม่จบเลย

     
    มาเจอ div กับ table ก็งงอยู่พัก

     
    เลยเอาดรีมมาลองเล่นพร้อมดูโค้ต

     
    เพิ่งจะถึงบางอ้อ

     

     
    LaYer > div

     

     
    LayOUT > table

     

     

    Reply

Leave a Reply to Ivy Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial