เพิ่งจะเริ่มเรียน web design กับเค้ามีสิ่งที่ต้องเรียนรู้อีกเยอะเลยครับวันนี้ก็เลยนั่งเขียน Style ของ tag html tag หนึ่งที่ชื่อว่า <div> ถ้าใครเขียน ajax อยู่คงคุ้นเคยกับมันดีครับแต่วันนี้ผมจะเอามันมาแทน table ด้วยเหตุผลหลายอย่างแม้ว่าจะยุ่งยากมากกว่า table แต่ในด้านความเร็วผมว่ามันโหลดเร็วกว่า table ครับ อีกทั้งสามารถสร้าง Block Content และอีกหลากหลายความสามารถ yahoo.com ล้วนใช้ div tag ใช่ว่า div จะเหมาะกับการแสดงข้อมูลที่มีความซับซ้อนและจำนวนมาก table ย่อมเป็นตัวเลือกที่ดีกว่าเพราะนำไปใช้ง่ายกว่าดังนั้นเราต้องคำนึงถึงความเหมาะสมในการใช้งานด้วย

กำหนด Style ของ Div
<style type="text/css">
<!--
#div0 {
margin: 0px auto;
padding: 1px;
height: 120px;
width: 150px;
border:solid 1px #000000;
}
#div1 {
margin: 0px;
padding: 0px;
float: none;
height: 40px;
width: 100%;
border-bottom:1px #000000 solid;
}
#div2 {
margin: 0px;
padding: 0px;
float: left;
height: 40px;
width: 100%;
}
#div3 {
margin: 0px;
padding: 0px;
float: left;
height: 40px;
width: 100%;
}

#divinner201 {
margin: 0px;
padding: 0px;
float: left;
height: 40px;
width: 50px;
border-bottom:1px #000000 solid;
border-right:1px #000000 solid;
}
#divinner202 {
margin: 0px;
padding: 0px;
float: left;
height: 40px;
width: 49px;
border-bottom:1px #000000 solid;

}
#divinner203 {
margin: 0px;
padding: 0px;
float: left;
height: 40px;
width: 49px;
border-bottom:1px #000000 solid;
border-left:1px #000000 solid;
}
#divinner301 {
margin: 0px;
padding: 0px;
float: right;
height: 40px;
width: 49px;
border-left:1px #000000 solid;

}
-->
</style>

นำ Style ที่ใช้งานไปสร้างตาราง div ตาม code htmlด้านล่าง

<div id="div0">
<div id="div1"></div>
<div id="div2">
<div id="divinner201"></div>
<div id="divinner202"></div>
<div id="divinner203"></div>
</div>
<div id="div3">
<div id="divinner301"></div>
</div>
</div>

ผลที่ได้จากการรัน