ใช้ คุณสมบัติ css stylesheet สร้างตาราง ใช้ได้กับ IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ
CSS Code ตัวอย่าง
<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 ตัวอย่าง
<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
