ใช้ คุณสมบัติ css stylesheet สร้างตาราง ใช้ได้กับ IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ
CSS Code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css">.iTable{ display:table; /* กำหนดให้แสดงเหมือนแท็ก table */ width:500px; margin:auto; border:1px solid #333; border-collapse:collapse;}.iCaption{ display:table-caption; /* กำหนดให้แสดงเหมือนแท็ก caption */ caption-side:top; text-align:center;}.iRow{ display:table-row; /* กำหนดให้แสดงเหมือนแท็ก tr */}.iTd{ display:table-cell; /* กำหนดให้แสดงเหมือนแท็ก td หรือ th */ border:1px solid #333; text-align:center;}</style> |
HTML Code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="iTable"><span class="iCaption">Table Description</span><ul class="iRow"><li class="iTd">data 1</li><li class="iTd">data 2</li><li class="iTd">data 3</li></ul><ul class="iRow"><li class="iTd">data 4</li><li class="iTd">data 5</li><li class="iTd">data 6</li></ul><ul class="iRow"><li class="iTd">data 7</li><li class="iTd">data 8</li><li class="iTd">data 9</li></ul></div> |
ตัวอย่าง (IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ หากเป็นเวอร์ชันไม่สนับสนุน จะแสดงตัวอย่างด้านล่างเพี้ยน)
Table Description
- data 1
- data 2
- data 3
- data 4
- data 5
- data 6
- data 7
- data 8
- data 9
เวอร์ชั่นอื่นสามารถศึกษาจากหัวข้อนี้ข้างล่างนี้แทน
https://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.html
