ทำไมต้องเลย์เอาท์ด้วย CSS ? [Article ID : 194]

อย่างที่ผมจั่วหัวไปว่า..วัตถุประสงค์ที่ dwthai.com เปิด section นี้ขึ้นมาใหม่ภายใต้ชื่อ css.dwthai.com นี้ จะเป็นการกล่าวถึงเรื่องของ CSS โดยมุ่งเจาะไปที่การทำเอา CSS มาใช้ในการออกแบบหรือ Layout หน้าเว็บเป็นสำคัญ ดังนั้น{cut} ก่อนที่จะไปเริ่มเรียนรู้ CSS กันกับบทความอื่น ๆ ผมจึงขอแนะนำกล่าวถึงว่า...ทำไมต้องเลย์เอาท์ด้วย CSS กันก่อนครับ

การเลย์เอาท์ด้วย CSS หรืออาจจะเรียกว่า Tableless Layout แทนการใช้งาน Table หรือตาราง ปัจจุบันกำลังได้รับการกล่าวถึงในแวดวงของนักพัฒนาเว็บ (web developer) เป็นอย่างมาก เนื่องจากว่า...การเลย์เอาท์ด้วย Table ที่เราคุ้นเคยกันมานานเริ่มจะไม่ตอบสนองความพึงพอใจต่อการออกแบบเว็บในปัจจุบันในหลายจุด เช่น ระยะเวลาการ Download ของหน้าเว็บเพจ, ความเข้ากันได้ของ Web Browser ที่แสดงผลเว็บเพจในแต่ละยี่ฮ้อ, การผสมปนเปกันไปมาระหว่างโค้ดที่ใช้ในการบังคับแสดงผลกับข้อมูล หรืออื่น ๆ สิ่งต่าง ๆ เหล่านี้ทำให้นักพัฒนาเว็บหันกลับมามองว่า Tag Table ของ HTML แท้จริงแล้วไม่ได้มีวัตถุประสงค์ที่จะนำมาใช้ในการเลย์เอาท์ หรืออกแบบหน้าเว็บ หากแต่ Table เกิดขึ้นมาเพื่อมีวัตถุประสงค์เพื่อใช้ในการแสดงผลข้อมูล ที่จะออกมาเป็นลักษณะรายงาน (report) ในรูปแบบตารางเสียมากกว่า  จึงมีการหยิบยกเอามาตราฐาน CSS ขึ้นมาใช้งาน ในการกำหนดรูปแบบการแสดงผลของหน้าเว็บเพจแทนการใช้งาน Table ตาราง ที่ใช้กันอยู่เดิม ซึ่งการนำเอา CSS มาใช้ในการออกแบบ webpage กลับมีผลดีมากกว่าที่จะใช้ตารางออกแบบ ซึ่งผมจะหยิบยกเท่าที่ผมรวบรวมมาได้ออกเป็นข้อ  ๆ ดังนี้

.........................................................................

1. เว็บเพจมีการ Download ได้รวดเร็วขึ้น เนื่องจากการใช้งานตารางในการออกแบบเมื่อผู้ใช้งานเข้ามาเยี่ยมชมเว็บและมีการ Load หน้าเว็บเพจ เว็บเพจจะแสดงผลก็ต่อเมื่อ Browser ทำการ Download เพจนั้นแล้วพบ Tag ปิดของตาราง (/table) หากปริมาณข้อมูลในตารางมีจำนวนมากก็ต้องรอโหลดนานขึ้น และแสดงผลข้อมูลพร้อมกันทั้งตาราง แต่การโหลดหน้าเว็บเพจที่ใช้งาน CSS ออกแบบ การโหลดข้อมูลจะค่อยเป็นค่อยไป ไม่ต้องรอข้อมูลแสดงผลพร้อมกันแบบการใช้งานตาราง
2. แก้ไขส่วนแสดงผลได้รวดเร็วขึ้น เนื่องจาก CSS ที่ใช้การเลย์เอาท์เรามักจะทำการแยกเก็บส่วนออกแบบแสดงผลไว้ที่จุด ๆ เดียว ทำให้เมื่อเราต้องมีการแก้ไขส่วนกำหนดค่าการแสดงผลใด เราสามารถแก้ไขได้โดยตรงและส่งผลต่อ TAG ที่มีการเรียกใช้งาน CSS นั้นทุกจุด
3. ส่งผลดีต่ออันดับ Search Engie มีการกล่าวกันในแวดวงนักพัฒนาเว็บไซต์ว่า..CSS ทำให้ Robot ของ Search Engie ตรวจสอบข้อมูลหน้าเว็บของเราได้สะดวกขึ้นกว่าการใช้งาน Table ออกแบบ จึงทำให้เว็บเราสามารถขึ้นอันดับ Search Engie ได้มากกว่ากว่าใช้ตารางออกแบบ (เขาว่านะผมไม่ยืนยัน)
4. ความเข้ากันได้ระหว่างโปรแกรม Web Browser ในการแสดงผล เนื่องจาก CSS เป็นมาตราฐานที่องค์กร W3C รับรอง จึงทำให้ Web Page ที่ออกแบบด้วย CSS มีความเป็นมาตราฐานในการแสดงผลมากกว่าการใช้งาน HTML ปรกติ ทั้งนี้ขึ้นอยู่กับ Web Browser ด้วยว่ารองรับมาตราฐาน CSS ในเวอร์ชั่นใด พูดง่าย ๆ คือถ้าเราใช้ CSS ในการเลย์เอาท์ จะทำให้เว็บเพจของเรามี % ในการแสดงผลออกมาสมบูรณ์กับทุก ๆ Web Browser มากกว่าการใช้งาน HTML หรือ Table โดยปรกติ
5. อื่น ๆ รอเพื่อน  ๆแลกเปลี่ยนประสบการณ์กันครับ...

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

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

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

CSS Selectors เบื้องต้น ในรูปแบบพื้นฐานที่ควรรู้

เรื่อง : มารู้จักกับ CSS Selectors เบื้องต้นกัน บทความที่ผ่านมาเป็นบทความว่าด้วย ไวยากรณ์พื้นฐานของ CSS ดังที่เราได้เรียน...  

Layout เว็บเพจด้วย CSS Step 2

ออกแบบเว็บเพจด้วย CSS Step2 บทความ Step ที่ 2 นี้ก็ยังคงอยู่ในเรื่องเดิม นั้นก็คือ การนำเอา CSS มาใช้งานแทนการใช้ TAG Table ของ HTML ซ...  

การเขียน CSS ใน 3 รูปแบบ

เรื่อง : รูปแบบการเขียน CSS กับเว็บเพจ การเขียน CSS มีได้หลายรูปแบบในการจัดเก็บโค้ด หลัก ๆ ก็จะมีอยู่ 3 ร...  

การกำหนดคุณสมบัติของ CSS ด้วยโปรแกรม Dreamweaver

เรื่อง : กำหนดคุณสมบัติ CSS ด้วยโปรแกรม Dreamweaver (CSS Rule definition) ในบทความก่อนได้เกริ่นนำไปแล้วถึงการกำหนดคุณสมบัติ...