div

Tag: div

การเรียงลำดับข้อมูลของ xhtml ในกล่องกับ div (+section), h1-h6 (h), p และ inline elements

อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม

เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง

DIV (Division)

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

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 4 : หัก div หักดิบ ไม่มี div หรือ table

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

ทำยังไงที่เราจะพอดี พอเพียงกับชีวิตและพัฒนาตัวเองตามเทคโนโลยีได้อย่างพอเหมาะ และปรับตัวเข้ากับระบบกลไกการตลาดได้อย่างดีพอ (อันหลังนี้ไปหาทางกันเอาเองครับ)

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

เริ่มกันเลยกรุณาดูโค้ด หรือวิวซอสตามไปด้วยนะครับ

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 3 (สร่างเมา)

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

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 2 (เมา DIVs)

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

การเปลี่ยนใจจาก table มา div ก็เหมือนจะรู้จักแต่ div เท่านั้นที่ผมจำได้ในตอนแรกๆ ที่ผมเขียน css+xhtml ผม div กระจายวายป่วงมากๆ เช่น แค่การทำตัวหนังสือใหญ่ๆ เป็น header ผมก็จะใช้

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 1

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

เหมือนเวลาที่ท่านเคยทำอะไรบางอย่างมานาน ทำแล้วทำอีก ทำแล้วทำอีก แล้วอยู่ๆ วันหนึงก็มี เงาลึกลับมาบอกท่านว่า ที่ท่านกำลังทำนั้น มันผิด มันมีทางที่ถูกต้อง ท่านควรลองศึกษาทางใหม่ดูบ้าง

อาการแรกที่ท่านอาจจะรู้สึกและต้องทำ แต่อาจจะทำไม่ได้ คือ ทำใจ ทำใจให้ยอมรับและปรับเปลี่ยน

การเรียนรู้สิ่งใหม่มันไม่ใช่เรื่องยาก มากมายอะไร แต่การบังคับจิตใจตัวเองให้ยอมรับนั้น มันยากยิ่งกว่าต่างหาก

ย้อนกลับไป เมื่อหลายปีก่อน ตอนที่ผมเพิ่งเริ่มทำเว็บใหม่ๆ เครื่องมือที่ใช้ก่อร่างสร้างเว็บก็ไม่ใช่ใครอื่นใด คือ ดรีมวีฟเว่อร์ 3 นั่นเอง

Back to Top