ตารางด้วย div (tableless ตอนที่ 1)
หลักการจริงๆของการแสดงผลแบบตารางด้วย DIV และ CSS ก็คือการกำหนดขนาดที่แน่นอนครับ
<div id="table">
<p><span class="col1">1,1</span><span class="col2">1,2</span><span class="col3">1,3</span></p>
<p><span class="col1">2,1</span><span class="col2">2,2</span><span class="col3">2,3</span></p>
</div>div ก็คือ ขอบเขตของตาราง กำหนด css ไปที่ #table
p แทน แถวแต่ละแถว
span แทนแต่ละคอลัมน์ กำหนด css ด้วย .col1,.col2,.col3 ซึ่งแต่ละคอลัมน์อาจมีขนาดแตกต่างกันตามที่กำหนดใน CSS
#table {
width: 406px; /* col1 + col2 + col3 + padding + border */
border-top: 4px solid #e3e7e7; /* เส้นกรอบด้านบน */
background-color: #FFF; /* สีพื้นของตาราง */
}
#table p {
clear: both;
width: 100%;
margin: 0;
}
#table span {
float: left;
padding: 0 10px; /* padding ของแต่ละคอลัมน์ */
border-left: 1px solid #e3e7e7; /* เส้นกรอบด้านซ้ายของแต่ละเซล */
border-bottom: 1px solid #e3e7e7; /* เส้นกรอบด้านล่างของแต่ละเซล */
}
#table span.col1 {
width: 110px; /* ความกว้างของคอลัมน์ 1 */
}
#table span.col2 {
width: 186px; /* ความกว้างของคอลัมน์ 2 */
}
#table span.col3 {
width: 110px; /* ความกว้างของคอลัมน์ 3 */
border-right: 1px solid #e3e7e7; /* เส้นกรอบด้านขวาของแต่ละเซล */
}สิ่งที่ต้องคำนึงถึงในการกำหนดขนาดของตาราง #table ก็คือ ขนาดรวมของตารางจะเท่ากับ ขนาดของแต่ละเซล รวมกับ padding และ เส้นขอบ
1,11,21,3
2,12,22,3