ตารางด้วย div (tableless ตอนที่ 1)

การแสดงผลแบบตาราง ด้วย DIV และ CSS อาจเป็นเรื่องยุ่งยากสำหรับมือใหม่ที่ต้องการออกแบบ แบบ tableless (ไม่ใช้ตาราง) และอาจมีข้อจำกัดมากพอสมควรนะครับ เนื่องจาก table นั้นจะแสดงผลได้ยืดหยุ่นกว่า โดยเฉพาะ กับข้อมูลที่ควบคุมไม่ได้

หลักการจริงๆของการแสดงผลแบบตารางด้วย DIV และ CSS ก็คือการกำหนดขนาดที่แน่นอนครับ

div ก็คือ ขอบเขตของตาราง กำหนด css ไปที่ #table
p แทน แถวแต่ละแถว
span แทนแต่ละคอลัมน์ กำหนด css ด้วย .col1,.col2,.col3 ซึ่งแต่ละคอลัมน์อาจมีขนาดแตกต่างกันตามที่กำหนดใน CSS

สิ่งที่ต้องคำนึงถึงในการกำหนดขนาดของตาราง #table ก็คือ ขนาดรวมของตารางจะเท่ากับ ขนาดของแต่ละเซล รวมกับ padding และ เส้นขอบ