ใช้ คุณสมบัติ css stylesheet สร้างตาราง

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

เวอร์ชั่นอื่นสามารถศึกษาจากหัวข้อนี้ข้างล่างนี้แทน

https://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.html