เว็บไซต์…ไม่ใส่ตาราง

มันเริ่มจากการอ่านเว็บไปเรื่อยๆและเจอกระแส tableless html layout มานาน แต่ก็บอกตัวเองว่าไม่มีเวลาสักทีที่จะเปลี่ยนสไตล์การเขียนเว็บของตัวเองจาก “old school html” ที่เน้นใช้ตารางในการจัดหน้า html มาเป็น css based layout ที่ใช้ div และ css เป็นหลัก บอกว่าไม่มีเวลาจริงๆแล้วก็เป็นข้ออ้างนั่นแหละ เพราะการเปลี่ยนจากสิ่งที่คุ้นเคยมาใช้อะไรใหม่ๆมันต้องเรียนรู้อะไรมากมาย ทำให้ไม่อยากจะเปลี่ยนแปลงอะไรในบางจังหวะของชีวิตที่ยึดเอาความขี้เกียจเป็นที่ตั้ง จนกระทั่งได้จังหวะก็เริ่มมาศึกษาจริงๆจัง กว่าจะเขียนได้คล่องก็ไม่ง่ายแต่ก็ไม่ได้ยากมากมายอย่างที่คิดไว้

มันคืออะไรบ้างนะ?

“table based html” หรือที่เรียกกันว่า old school html table ก็คือการจัดหน้าเว็บโดยใช้ html table หรือ ตาราง เป็นหลัก ซึ่งเป็นการเขียนแบบที่ทำกันมานานแล้ว จะจัดหน้าหรือกำหนดอะไรก็มันจะใส่ลงไปในโค้ทส่วนของตารางเลย

“css based layout”คือการใช้ cascading style sheet เข้ามาช่วยในการกำหนด layout และใช้ตารางเฉพาะส่วนที่เนื้อหามันเป็นตารางจริงๆ เช่น ตารางเปรียบเทียบ แมทริกซ์ต่างๆ โดยมักจะแยกไฟล์ css ออกจากโค้ทส่วนของเนื้อหาเว็บไซต์

ดีกว่ายังไง?

  1. โหลดเร็วกว่า จากเดิมที่ในไฟล์ html จะต้องมีการกำหนดรูปแบบการแสดงผลที่ตาราง แต่หากเขียนแบบ css จะกำหนดการแสดงผลไว้ในไฟล์ css แยก ทำให้สามารถใช้ร่วมกันได้ในหลายๆหน้า และไฟล์ดังกล่าวจะถูกเก็บไว้ใน catch ของบราวเซอร์ และไม่ถูกโหลดซ้ำๆหลายๆหน ทำให้ผู้ใช้งานเปิดเว็บได้เร็วขึ้นและประหยัดแบนวิธของเซิฟเวอร์ได้อีกด้วย
  2. แก้ไขรูปแบบการแสดงผลง่าย หากต้องการแก้ก็ไม่ต้องไปนั่งแก้ทั้งเว็บ เพียงแค่แก้ในไฟล์ css ก็จะส่งผลไปถึงทุกๆหน้า
  3. เกิดผลดีต่อ search engine และโปรแกรมช่วยเหลือคนพิการ(ประเภท screen reader) ทำให้อ่านเนื้อหาในเว็บเราได้ดีขึ้น การใช้ css จะลดโค้ทส่วนการแสดงผลออกไปจากหน้า html ทำให้โปรแกรมเข้าถึงเนื้อหาจริงได้ง่ายขึ้น อีกทั้งการใช้ html tag ที่มีความหมาย(sementic) เช่น h1, h2, p ทำให้โปรแกรมเข้าใจเนื้อหาในเว็บเรามากขึ้น และเว็บมาสเตอร์สามารถกำหนดได้ว่าอยากให้โปรแกรมมองว่าส่วนไหนสำคัญ
  4. search engine friendly ยกตัวอย่างเช่น หากเราออกแบบเว็บให้มีเมนูย่อยด้านซ้ายและเนื้อหาอยู่ด้านขวาและเราต้องการเน้นเนื้อหาด้านขวามากกว่าซ้าย หากใช้ตาราง โค้ทของเราจะมีเนื้อหาส่วนเมนูย่อยด้านซ้ายขึ้นมาก่อน และด้านขวามาทีหลัง ทำให้ search engine ให้ความสำคัญกับเนื้อหาที่มาก่อนมากกว่า แต่หากใช้ css เราสามารถเขียนเนื้อหาด้านขวาให้มาก่อน และด้านซ้ายมาหลัง จากนั้นจึงค่อยจัดการแสดงผลให้อยู่ในตำแหน่งที่ต้องการได้ โดยรักษาลำดับความสำคัญของเนื้อหาที่มีต่อ search engine ไว้ได้ครบถ้วน
  5. out of the box หากใช้ css  layout จนคล่องแล้วจะพบว่ามีวิธีการเขียนมากมายที่ทำให้สามารถเขียนเว็บไซต์ได้โดยไม่ถูกจำกัดโดยระบบของตาราง เช่น การซ้อนวัตถุต่างๆเป็นชั้นๆที่ตำแหน่งเดียวกันได้ การกำหนดให้วัตถุใดๆอยู่กับที่ก็ทำได้ และการจัดรูปแบบอื่นๆอีกมากมายตามแต่จะจินตนาการได้เลยทีเดียว
  6. อื่นๆอีกมากมาย เช่น การที่โค้ท html ไม่รก ก็ทำให้ใช้งานคู่กับการเขียนภาษาโปรแกรมเช่น php แทรกลงไปได้ง่ายขึ้น ไม่ต้องสู้รบกับ tr th td เป็นต้น

มันยากกว่าใช้ table?

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

คุ้มหรือไม่?

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

  1. No comments yet.

  1. No trackbacks yet.