Tableless design

วันนี้ พักเรื่อง oracle แล้วมาดู HTML กันดีกว่า

Tableless design เป็นการออกแบบ layout ของ HTML โดยไม่ใช้ table มาช่วยเลย โดยการที่ไม่ใช้ table ไม่ได้หมายความว่าจะตัด table ออกจาก html ไปเลย เพียงแต่ไม่ใช้ table ในการ design layout ส่วน table ก็ไปทำหน้าที่ในตอนแสดงข้อมูลออกมาในตารางเท่านั้น

ถ้าไม่ใช้ตารางจะใช้อะไรแทนหละ คำตอบตือใช้ <div> และ <span> ช่วยในการวาง Layout แทน โดย <div> ใช้ในออกแบบเกี่ยวกับ layout ในส่วนที่ไม่มีตัวอักษร เช่นการแบ่งโครงสร้างต่างๆของ web เช่นส่วนของเมนู ส่วนของ Banner ส่วนของ content ส่วนของ footer เป็นต้น ส่วน <span> จะเอามาใช้ในการจัดโครงสร้างของข้อความต่างๆ ไปดูเหตุผลพวกนี้ที่
http://www.divland.com/blog/2007/03/23/div-or-span/

แล้วเราจะออกแบบยังไง เราก็ออกแบบโดยมองว่า 1 <div> แทนโครงสร้างในส่วนหนึ่ง อย่างเช่น

<div id="banner">Banner</div>

อาจจะยังไม่เห็นภาพรวมของมันเราลองดูกันเต็มๆว่าถ้าใช้
<div>เต็มๆแล้วจะเป็นยังไง

<body>
<div id="page">
<div id="banner">Banner</div>
<div id="nav">Navigator</div>
<div id="content">
<div id="col1">Column1</div>
<div id="col2">Column2</div>
</div>
<div id="footer">Footer</div>
</div>
</body>

โครงสร้างที่เราคาดหวังว่าจะได้ มันจะเป็นเหมือนรูปด้านล่าง

แต่รูปด้านบนคือสิ่งที่เราคาดหวังแต่พอ run จริงๆจะได้ผลแบบนี้

ซึ่งไม่ใช่อย่างที่หวังอยากจะเป็นเลย เพราะอย่างที่เราบอกตอนแรกว่า <div> ใช้แค่วาง Layout เท่านั้น แต่การจัดการแสดงผลเราต้องใช้ css ช่วยในการให้มันแสดงผลออกมาให้เป็นไปตามสิ่งที่เราหวัง โดยลองใส่ css ลงไปดังนี้

<style type="text/css"> body{ background-color: #4D87C7; }

#page{
background-color: white;
margin: 0 auto;
width: 1000px;
padding:10px;
}

#banner{
padding: 35px 0px 0px 30px; background-repeat: repeat;
color: #999999;
height: 65px; font: bold 20px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#nav{
padding: 10px;
background-color:#FFAA55;
}
#content{}

#col1{
position: absolute;
float: left;
width: 225px;
padding: 10px;
background-color: #E1EFF7;
}

#col2{
margin-left: 245px;
width: 735px;
padding: 10px;
background-color: #AAAAFF;
}

#footer{
color: white;
padding: 10px;
text-align: center;
background-color: #464A4B;
}  </style>

เราก็จะได้สิ่งที่เราต้องการอย่างสุขสมอุราดังรูปด้านล่าง

สิ่งสำคัญการออกแบบ layout แบบ tableless นี้ก็คือ css นั่นเอง ในตอนแรกถึงแม้ว่ามันจะดูยุ่งยากวุ่นวาย แต่จะสังเกตุว่าค่าการตั้งค่าต่างๆของการแสดง layout นั้นอยู่ใน css หมดเลยทำให้มันดีตรงที่ในหน้า html เรา code จะไม่รกเลย ทำให้เราจัดการกับข้อมูลในการนำเสนอออกมาเท่านั้น แต่วันไหนถ้าหากจะเปลี่ยน font เปลี่ยน layout เราก็ไม่ต้องไปยุ่งกับ HTML เลยเพราะเรา config ลงใน css หมด นอกจากจะทำให้เราจัดการกับ HTML ได้ง่ายขึ้นแล้วยังทำให้ HTML โหลดเร็วขึ้นกว่าเดิมด้วย

อาจจะดูยุ่งยากไปหน่อยในตอนเริ่มศึกษาแต่ถ้าเราเข้าใจหลักการหรือโครงสร้างทุกอย่างแล้วเราก็ไม่จำเป็นที่ต้องมาออกใหม่ทุกครั้งอย่างนี้ก็ได้เพราะว่ามันมี template ให้เรามาใช้ได้เลยไม่ต้องออกแบบใหม่ เพียงแต่เอามาแก้ไขในส่วนของ css เท่านั้นเพื่อให้มันเป็นไปตามลักษณะ รูปแบบที่เราต้องการ ซึ่ง css template พวกนี้เราจะเรียกว่า css framework ซึ่งมีที่ดังๆอยู่ที่ผมรู้จักนะ (อาจจะเยอะกว่านั้น) สองตัวคือ blueprintcss และ elasticss

สนใจตัวไหนลองไปศึกษาดูครับ เอาละไม่มีอะไรจะโม้แล้วขอจบลงเพียงแต่เท่านี้ ซึ่งสิ่งที่ผมได้อธิบายมานั้นเป็นการสรุปคร่าวๆ ลองไปศึกษาเพิ่มเติมที่ http://www.divland.com/blog/category/begining-css เลยครับ

ข้อเขียนนี้ช่วยฉัน: