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

06 April 2010 By Ninenik Narkdee
css ตาราง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css ตาราง



ใช้ คุณสมบัติ 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

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

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



เพียงกด Like หรือ Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: css ตาราง







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ