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

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

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

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

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

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

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

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

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

ผมเตรียมไว้ให้พร้อมแล้ว ในไฟล์ซิป โหลดไปยำได้เลย ดาวน์โหลดได้ที่นี่

ผมเปิดซิงหน้านี้ด้วย h1 แน่นอน element ที่สำคัญระดับสิทธัตถะ เราต้องเอาไว้บนสุด ตามด้วย h2 หลายคนสงสัย ไอ้ h2 มันสถิตอยู่ตรงไหน โปรดมองไปที่มุมขวา ด้านบนสุด ที่มีลายไทยจางๆ ใช่เลยครับ นั่นคือ พื้นหลังของ h2 แล้ว h1 ก่อนหน้านี้หละ ก็ไอ้โลโก้เหียกๆ ของเว็บนั่นไงครับพี่น้อง ติด absolute position เข้าไป ติดลบให้ text-indent นิดหน่อยก็หรูแล้ว

ul li ตามมาติดๆ นั่นคือ Navigation สำหรับเว็บ ใจจริงแล้วผมอยากใช้ nl li มากกว่า แต่ ติดที่ว่า อ้ายอี ทั้ง 2 ตนนั้นมันยังไม่รองรับ จึงต้องปรับใจใช้ของเดิมก่อน จับพื้นหลังที่เป็นปุ่มใส่เข้าไปให้ ul จัดระยะห่างระหว่าง li ด้วย padding อย่าลืมใส่ line-height ให้พ่อท่านด้วย และสำคัญยิ่ง อ้ายอีทั้งสองตนนั้น มันอ่านค่า padding ไม่เหมือนชาวบ้านชาวเมือง กรุณา Hack ด้วย [if lte IE 6] ยัด absolute position ให้ ul แล้วก็จัดตำแหน่งด้วยค่า % สำหรับฝั่งซ้าย ส่วนด้านบน ใช้ px เพื่อความแม่นยำ

ซึ่งพอนำทั้งหมดที่กล่าวมาด้านบนมารวมกับ พื้นหลังของ body ที่ repeat-x แล้วมันจะทับกันพอดี

จบส่วน header

เชิญเดินดงกันต่อกับส่วน body

Blockquote ผมเอามาใส่ไว้ เสมือนคอลัมน์ ผมโยกให้ไปอยู่ฝั่งขวามือด้วยคำสั่ง float: right แต่ เฉกเช่นเดิม อ้ายอีไม่เข้าใจ จึงอัญเชิญดาบอาญาสิทธิ์มาแหก ด้วย position แบบ absolute เลยทำให้ข้อมูลฝั่งซ้ายของ IE ต้องถูกย่อส่วนลงเหลือ 40% เพิ่ม magin-right ให้ทั้ง h และ p ตามระเบียบ

สำหรับ บราวเซอร์ทั่วไป ไม่ต้อง absolute position ให้กับ blockquote แค่ float: right; แล้วตระกูล h กับ p ที่อยู่ฝั่งซ้ายจะถูก wrap โดยอัตโนมัติ

ใน blockquote ผมใส่ ol li เข้าไปเพื่อทำลิสต์ข้อมูล แล้ว label โผล่มาไงหว่า XHTML 2.0 ไงครับ สั่ง list-style-position: inside; ให้กับ li ของ ol ด้วย ตัวเลขจะได้ไม่โดดออกนอกกรอบ

ข้ามกลับไปฝั่งซ้าย ใน p ที่ดูเหมือนมันมี tab ให้ตัวหนังสือ ผมใช้ strong ในย่อหน้าแรก และที่เหลือผมครอบด้วย span สั่งทั้ง 2 อย่าง padding-left: 3em; แต่จริงๆ แล้ว css3 มี p:first-line { padding-left: 3em;} อย่างว่าครับ อย่าเพิ่งเล่นเลย เอาไว้มันออกมาก่อนแล้วค่อยเล่น มั่วไปอย่างนี้ก่อนแล้วกัน

สุดท้ายกับ footer ล่างสุด ผมเลือกใช้ บริการของ address ใส่พื้นหลังให้ด้วย เอา span ไปครอบตัวหนังสือ สั่งความกว้างที่ 60% และ display: block; ซะ ตัดบรรทัดได้ไปในตัว

ฝากเอาไว้สำหรับใครที่ต้องการเอาโค้ดทั้งหมดไปศึกษา ผมเตรียมไว้ให้พร้อมแล้ว ในไฟล์ซิป โหลดไปยำได้เลย ดาวน์โหลดได้ที่นี่

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

ไปก่อนหละครับ ฤดูทำนามาถึงแล้ว แม่กับพี่ต้องการตัวเพราะหาคนถางหญ้าคันนาไม่ได้ ขอตัวกลับไปสูดกลิ่นโคลน สาบควายที่อุดรธานีสักพัก หว่านกล้าเสร็จแล้วจะกลับมา

มีความสุขกับการเขียน เว็บแบบ Tableless, Divless, Classless และ IDless ครับ

ปล. บทความนี้ผมเขียนด้วยความโง่ครับ แต่ก็จะปล่อยให้มันประจานตัวเองอย่างนี้ไปก่อน