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

เป็นอีกตัวอย่างหนึ่งของการแสดงตารางด้วย div (tableless) ซึ่งในตัวอย่างนี้ แต่ละคอลัมน์มีความกว้างไม่เท่ากัน และสามารถมีข้อมูลได้หลายบรรทัดต่อ 1 เซล

เหมือนเดิมครับเส้นแนวตั้งของตารางเกิดจากรูปภาพพื้นหลัง แต่เนื่องจากในตัวอย่างนี้ ขนาดของแต่ละเซลไม่เท่ากันเราจึงไม่สามารถใช้รูปภาพพื้นหลังในแบบตัวอย่างก่อนได้

แนวคิดการออกแบบเส้นแนวตั้งก็คือการใช้รูปที่แสดงผลทีเดียวทั้งแถว ดังตัวอย่าง สังเกตุดูดีๆนะครับว่ารูปภาพที่ใช้จะมีขนาดกว้างแค่เพียง 2 เซล (300px * 10px) เนื่องจากในเซลสุดท้ายเราจะใช้เส้นคั่นที่ได้จาก CSS แทน (กรอบของ #table)
เส้นแรกจะอยู่ที่ 130px (ขนาดเซล 110px + margin ข้างละ 10px)
เส้นที่สองจะวาดที่ขอบด้านซ้ายสุดของรูปภาพเลยครับ (วาดแค่ 2 คอลัมน์เท่านั้น)
ขนาดของรูป 300px ได้จาก 110(ความกว้างของเซลแรก) + 150(ความกว้างของเซลที่ 2) + 40(margin รวมกันของทั้ง 2 เซล)