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

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 มากมายนัก