ก่อนอื่นดูตารางก่อน

Table Layout

โค้ทของตาราง

This is Header



Main Menu
-Menu1

Content goes here!
This is content!

ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css

ออกมาจะหน้าตาเป็นแบบนี้

Css Div Layout

ก็คล้ายๆกัน ดูเผินๆก็ไม่มีอะไรต่าง แต่ทีนี้มาดูโค้ทกันบ้าง
ส่วนของ html จะเห็นว่าโค้ท html จะไม่ยุ่งยากเหมือนตอนทำตาราง ซึ่ง search engine จะชอบมากกว่า

This is Header
Main Menu
-Menu1
Content goes here!
This is content!

ส่วนของ css

div#container{
	width:350px;
	margin:0 auto;
	background:#cccccc;
}
div#header{
	text-align:center;
	background: #eeeeee;
}
div#menu{
	width:100px;
	float:left;
	background: #999999;
}
div#content{
	width:250px;
	float:left;
	background: #cccccc;
}

สองส่วนนี้เท่านั้น เป็นอันจบ ไม่เจ็บปวดอย่างที่คิด ตอนเอามาประกอบรวมกันก็สามารถทำได้ 2 แบบ คือ

1. ใส่โค้ท css ไว้ในส่วน head ของ html ใต้ tag

2. แยกโค้ท css ไว้ในไฟล์ .css แล้วทำลิงค์ไปหา โดยใช้ tag

ซึ่งการแยกโค้ทออกไปนั้นมีประโยชน์หลายอย่าง เช่น

1. ลดเวลาโหลดหน้าต่อๆไป ประหยัดแบนด์วิธ เนื่องจากบราวเซอร์จะเก็บ cache ของไฟล์ css ไว้ในเครื่อง
2. สามารถแก้ไขได้ง่ายถ้านำไปใช้หลายๆหน้า html เพราะจะแก้ที่ไฟล์ css ที่เดียว
3. อีกทั้งในส่วน media=”xxx” นั้นสามารถกำหนดได้หลายอย่าง เช่น print,screen เพื่อเปลี่ยน layout สำหรับการดูแบบต่างๆ

การทำตารางไปเป็น div นั้นเป็นแค่การเริ่มต้นให้เห็นภายเท่านั้นว่าถ้าไม่มีตารางจะทำ layout อย่างไร ซึ่งถ้าใช้จริงๆแล้วตัว css จะสามารถใช้ทำหน้าเว็บได้อย่างอิสระมากกว่าใช้ตาราง และ powerful กว่ามากในแง่ของการออกแบบ ซึ่งมันแจ่มมาก และหากใช้คล่องๆแล้วจะพบว่ามันง่ายกว่าใช้ table มากมายนัก

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

“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 มันไปทุกสถานการณ์โดยไม่ดูตาม้าตาเรือ ของทุกอย่างมีข้อดีและเสียของมันอยู่ การใช้ระบบตารางก็ไม่ใช่จะเป็นความผิดอาญาอะไร เพราะงั้น เลือกใช้เครื่องมือให้ถูกกับงานก็คงเป็นทางออกที่ดีที่สุดนั่นเอง