รายละเอียด เพิ่มเติม
http://msdn.microsoft.com/en-us/library/ms535153.aspx
http://snook.ca/archives/html_and_css/css-text-rotation

การใช้งานจริง ต้องปรับแต่ง เพิ่มนิดหน่อย เพื่อให้การแสดงผลใน บราวเซอร์ที่แตกต่างกัน มีความใกล้เคียงกันทีสุด

ตัวอย่างผลลัพธ์

	จำนวนสินค้า 1	จำนวนสินค้า 2	จำนวนสินค้า 3	จำนวนสินค้า 4
ข้อมูลที่ 1	1	2	3	4
ข้อมูลที่ 2
ข้อมูลที่ 3
ข้อมูลที่ 4

CSS Code ตัวอย่าง

<style type="text/css">
body{
	font-size:12px;	
}
.textAlignVer{
	display:block;
	writing-mode: tb-rl;
	filter: flipv fliph;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	transform: rotate(-90deg); 
	position:relative;
	width:20px;
	white-space:nowrap;
	font-size:12px;
	margin-bottom:10px;
}
</style>

HTML Code ตัวอย่าง

<table width="200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="120" align="center" valign="bottom">&nbsp;</td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 1</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 2</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 3</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 4</span></td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 1</td>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
    <td align="center">4</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 2</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 3</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 4</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
</table>

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

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

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

ตัวอย่าง HTML Code
 

<div class="container">
  <div class="rightback">
    <div class="contentback">
      <div class="leftback">
        <div class="leftsidebar">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
        </div>
        <div class="content">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
         </div>
        <div class="rightsidebar">        
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
	</div>
      </div>
    </div>
  </div>
</div>

ตัวอย่าง CSS Code

<style type="text/css">
body{
	padding:0;
	margin:0;
	font-family:tahoma;
	font-size:12px;
}

.container{ /* กำหนดส่วนของ เนื้อหา ทั้งหมด */
	width: 900px; /* กำหนดความกว้าง ของทั้ง 3 คอลัมน์รวมกัน */
	margin:auto;
}
.rightback{ /* กำหนดพื้นหลัง คอลัมน์ ด้านขวา */
	background-color: #CCFFCC;
	overflow:hidden;
}
.contentback{  /* กำหนดพื้นหลัง คอลัมน์ ตรงกลาง */
	background-color:#CCCCFF;
	right: 250px;    /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftback{  /* กำหนดพื้นหลัง คอลัมน์ ด้านซ้าย */
	background-color: #FFFFCC;
	right: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */	
}
.rightback,.contentback,.leftback{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	position:relative;
	width:100%;
}
.leftsidebar{ /* กำหนดสำหรับคอลัมน์ ด้านซ้าย */
	width: 250px;   /* กำหนดความกว้าง ของคอลัมน์ ด้านซ่าย */
}
.content{  /* กำหนดสำหรับคอลัมน์ ตรงกลาง */
	width: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */
}
.rightsidebar{  /* กำหนดสำหรับคอลัมน์ ด้านขวา */
	width: 250px; /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftsidebar,.content,.rightsidebar{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	overflow:hidden;
	position:relative;
	left: 650px; /* ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย ในที่นี้ 900-250  */	
}
</style>

การนำไปใช้งาน
ให้นำค่าที่ต้องการไปกำหนดใน css ด้านบน ตรงส่วนที่ คอมเม้นไว้ ซึ่งมีค่าต่อไปนี้
1.ความกว้างทั้งหมด
2.ความกว้างคอลัมน์ด้านซ้าย
3.ความกว้างคอลัมน์ตรงกลาง
4.ความกว่้างคอลัมน์ด้านขวา
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย

สมมติ ดังนี้
ต้องการสร้าง layout 3 คอลัมน์ กว้างทั้งหมด 900 px คอลัมน์ซ้าย กว้าง 200 คอลัมน์ขวากว้าง 200
ตรงกลางกว้าง 500 สามารถกำหนดได้ดังนี้
1.ความกว้างทั้งหมด=900px
2.ความกว้างคอลัมน์ด้านซ้าย=200px
3.ความกว้างคอลัมน์ตรงกลาง=500px
4.ความกว่้างคอลัมน์ด้านขวา=200px
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย=700px

นำค่าที่ได้ไปแทนใน css ด้านบน

ต้วอย่าง

สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน

คุณสมบัติ color property
color
กำหนดเป็นค่าสี เช่น red #FF000 rgb(255,0,0) หรือ เป็นลักษณะ ค่าสีแบบ การถ่ายทอด inherit
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละ บราวเซอร์
สามารถกำหนดได้กับ html elements ทุกตัว
สามารถถ่ายทอดได้
ไม่สามารถ กำหนด เป็น เปอร์เซ็นต์ได้
นำเสนอโดย การแสดงผล
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ตัวอย่าง
ข้างล่างเป็นตัวอย่าง การกำหนดค่าสี แดง ให้กับ em tag element ในรูปแบบ ที่แตกต่างกัน

em { color: red }              /* กำหนดโดยการใช้ชื่อของสี */
em { color: rgb(255,0,0) }     /* กำหนดแบบ RGB อยู่ในช่วง 0 - 255  */

คุณสมบัติ Background Property
การกำหนดพื้นหลัง background สามารถกำหนดได้ทั้งสี color หรือ รูปภาพ images ตามรูปแบบของ box model
พื้นหลัง background นั้นหมายถึง พื้นหลังพื้นที่ของ เนื้อหา content ,พื้นที่ของระยะห่างจากขอบใน padding,และพื้นที่ของขอบ border โดยที่ ขอบ border สามารถกำหนด คุณสมบัติสี และรูปแบบด้วยคุณสมบัติ border property
ส่วนสำหรับ พื้นที่ของระยะห่างจากขอบนอก จะไม่รวมในพื้นหลัง background แต่จะมีลักษณะ โปร่งใส transparent

คุณสมบัติ Background properties จะไม่สามารถถ่ายทอดได้ แต่กรณีที่ element ที่อยู่เหนือกว่า หรือ parent element มีการกำหนด Background properties ดังนั้น เมื่อ ค่าเริ่มต้นของพื้นหลัง background เป็นแบบโปร่งใส transparent จึงทำให้มองเห็นพื้นหลังของ parent element

การกำหนดพื้นหลัง แนะนำให้กำหนดไว้ใน body แทนการกำหนดใน html
ตัวอย่าง

    <STYLE type="text/css">
       BODY { background: url("http://www.ninenik.com/marble.png") }
    </STYLE>

คุณสมบัติ 'background-color'
Value:   <color> | transparent | inherit 
สามารถกำหนดค่าเป็น ค่าสี หรือ โปร่่งใส transparent หรือ ลักษณะการถ่ายทอด
Initial:   transparent 
ค่าเริ่มต้นเป็น โปร่งใส
Applies to:   all elements 
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่สามารถกำหนดค่า เปอร์เซ็นต์ได้
Media:   visual 
นำเสนอ โดยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

คุณสมบัติ background-color ใช้สำหรับกำหนดค่าสีพื้นหลังของ element

ตัวอย่าง:

h1 { background-color: #F00 }

คุณสมบัติ 'background-image'
Value:   <uri> | none | inherit 
กำหนดค่าเป็น ตำแหน่งของรูปภาพ หรือ กำหนดไม่แสดง none หรือ กำหนดเป็นแบบการถ่ายทอด
Initial:   none 
ค่าเริ่มต้น คื่อไม่มี หรือไม่แสดง none
Applies to:   all elements 
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่สามารถ กำหนดเป็น เปอร์เซ้นต์ได้
Media:   visual 
นำเสนอโดยการแสดงผล
Computed value:   absolute URI or none 
ค่าจากการคำนวณ ไม่มีหรือขึ้นอยู่กับค่าสัมบูรณ์ URI

คุณสมบัติ background-image ใช้สำหรับกำหนดพื้นหลังที่ เป็นรูปภาพ
การกำหนดทั้ง background-image และ background-color จะทำให้กรณีที่ background-image ไม่มีรูปพื้นหลัง
ก็จะแสดงเป็นค่าสี แทนจากคุณสมบัติ background-color ได้

ตัวอย่าง:

body { background-image: url("ninenik.png") }
p { background-image: none }

คุณสมบัติ 'background-repeat'
Value:   repeat | repeat-x | repeat-y | no-repeat | inherit 
สามารถกำหนดค่าเป็น
repeat
ซ้ำในแนวตั้งและแนวนอน
repeat-x
ซ้ำเฉพาะในแนวนอนเท่านั้น
repeat-y
ซ้ำเฉพาะในแนวตั้งเท่านั้น
no-repeat
ไม่ต้องซ้ำ แสดงแค่รูปพื้นหลังแค่รูปเดียว
Initial:   repeat 
ค่าเริ่มต้น  เป็น ซ้ำในแนวตั้งและแนวนอน
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่มีคุณสมบัติการถ่ายทอด
Percentages:   N/A 
ไม่มีการกำหนดค่าเป็น เปอร์เซ็นต์
Media:   visual 
นำเสนอ ด้วยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ ก็จะสามารถกำหนดคุณสมบัติการแสดงผลรูปภาพซ้ำโดยใช้ background-repeat

ตัวอย่าง:

body { 
  background: white url("ninenik.png");
  background-repeat: repeat-y;
  background-position: center;
}

คุณสมบัติ 'background-attachment'
Value:   scroll | fixed | inherit 
สามารถกำหนดค่าเป็น เลื่อน sxroll ตามการเลื่อนของ scrollbar หรือ ตรึง fixed หรือ ตามการถ่ายทอด
Initial:   scroll 
ค่าเริ่มต้น เลื่อน sxroll ตามการเลื่อนของ scrollbar
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่มีการกำหนดค่า เปอร์เซ็นต์
Media:   visual 
นำเสนอ โดยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ เมื่อมีการกำหนดคุณสมบัติ  background-attachment เป็น fixed รูปพื้นหลัง
จะไม่เลื่อนตาม การเลื่อนของ scrollbar

ตัวอย่าง:

body { 
  background: red url("ninenik.png");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

คุณสมบัติ 'background-position'
Value:   [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 
สามารถกำหนดค่าเป็น เปอร์เช็นต์ หรือค่า อิงตำแหน่งด้านซ้าย ตรงกลาง แงละ ด้านขวา ตามด้วย เปอร์เซ็นต์ หรือค่า
อิงตำแหน่่งด้านบน ตรงกลาง หรือด้านล่าง หรือตามการถ่ายทอด
Initial:   0% 0% 
ค่าเริ่มต้น 0% 0% หรือ left top
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่มีการถ่ายทอด
Percentages:   refer to the size of the box itself 
เปอร์เซ็นต์กำหนดอิงตาม ขนาดของรูปพื้นหลังนั้นๆ
Media:   visual 
นำเสนอด้วยการแสดงผล
Computed value:   for <length> the absolute value, otherwise a percentage 
ค่าจากการคำนวณ กำหนดโดยตรง หรือ เป็นเปอร์เซ็นต์

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ หากไม่มีการกำหนด background-position ค่าที่ได้จะเป็นค่าเริ่มต้น หากมีการ
กำนหดค่าเดียว ค่าที่สองจะเป็น center หรือตรงกลางโดยอัตโนมัติ หากค่าหนึ่งค่าใดอย่างน้อยหนึ่งค่า ไม่ได้กำหนด
เป็นลักษณะ keyword เช่น left center หรือ top จะได้่ว่า ค่าแรกแสดงถึงตำแหน่งในแนวนอน และอีกค่าจะแสดงถึง
ตำแหน่งในแนวตั้ง และค่าที่กำหนดสามารถเป็นตัวเลขติดลบ ได้

top มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวตั้ง
right มีค่าท่ากับ '100%' สำหรับตำแหน่งในแนวนอน
bottom มีค่าท่ากับ '100%'  สำหรับตำแหน่งในแนวตั้ง
left มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวนอน
center มีค่าท่ากับ '50%' สำหรับตำแหน่งในแนวนอน

ตัวอย่าง:

body { background: url("ninenik.jpeg") right top }    /* 100%   0% */
body { background: url("ninenik.jpeg") top center }   /*  50%   0% */
body { background: url("ninenik.jpeg") center }       /*  50%  50% */
body { background: url("ninenik.jpeg") bottom }       /*  50% 100% */

คุณสมบัติ 'background'
Value:   [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit 
กำหนดค่าตามแต่ละคุณสมบัติ
Initial:   see individual properties 
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละคุณสมบัติ
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   allowed on 'background-position' 
ค่าเปอร์เซ็นต์ใช้กับ คุณสมบัติ background-position
Media:   visual 
นำแสดง ด้วยการแสดงผล
Computed value:   see individual properties 
ค่าจากการคำนวณ ขึ้นอยู่กับแต่ละคุณสมบัติ

คุณสมบัติ 'background' เป็นการคุณสมบัติแบบสั้น shorthand ที่รวมเอาทุกคุณสมบัติมารวมกัน

ตัวอย่าง

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

div.exampleDiv1{

}

div.exampleDiv1{

}

• position:static; เป็นค่าเริ่มต้น จะกำหนดหรือไม่กำหนดก็ได้ ปกติถ้ากำหนดจะใช้เมื่อทำการ override หรือกรณีต้องการล้างค่าที่กำหนดก่อนหน้า จากค่าอื่นเช่น fixed , absolute หรือ relative
  position:static; จะไม่รองรับการกำหนดค่า left , top, right และ bottom
• position:relative;เป็นการกำหนดตำแหน่งที่อิงความสัมพันธ์กับตำแหน่งเดิม เช่น div1 กำหนด position เป็น relative และกำหนด left:20px; ผลลัพธ์คือ div1 จากเลื่อนออกจากตำแหน่งเดิมทางซ้าย 20 pixels
  ข้อมูลหรือเนื้อหาที่อยู่ใน element ที่กำหนด position เป็น relative สามารถที่จะเลื่อนและอยู่วางซ้อนเหนือ elements ตัวอื่นได้ แต่จะเกิดพื้นที่ว่างจากเนื้อหาหรือข้อมูลขึ้นในตำแหน่งเดิม
  position:relative;จะใช้บ่อยสำหรับบรรจุบล็อกของ elements ที่กำหนด position เป็น absolute
   

• position:absolute; จะกำหนดตำแหน่งโดยอิงกับตำแหน่ง parent ตัวแรก ที่กำหนด position เป็นค่าอื่นที่ไม่ใช่ static
  ตัวอย่าง ถ้า div1 อยู่ใน div2 หมายถึง div2 เป็น parent ของ div1
  

      <div id="div2">
      <div id="div1">
  
      </div>
      </div>
  

  ถ้า div1 อยู่ใน div2 และ div2 อยู่ใน div3 หมายถึง div2 และ div3 เป็น parent ของ div1

      <div id="div3">
      <div id="div2">
      <div id="div1">
  
      </div>
      </div>
      </div>
  

  หาก div3 มีการกำหนด position เป็น relative,absolute หรือ fiexd (ยกเว้น static)
  และเมื่อกำหนด div1 position เป็น absolute ดังนั้นตำแหน่างของ div1 จะอิงความสัมพันธ์
  กับตำแหน่งของ div3 ซึ่งเป็น parent ตัวแรกที่เข้าเงื่อนไข

  กรณีไม่มี parent ใดๆ ที่เข้าเงื่อนไข ตำแหน่งของ div1 ที่กำหนด position เป็น absolute จะอิงกับ <html> หรือ ขอบด้านในของบราวเซอร์

  position:absolute; สามารถที่จะซ้อนทับกันได้ โดยใช้ร่วมกับ z-index เพื่อกำหนดตำแหน่งบน ล่าง

• position:fixed; .ใช้กำหนดตำแหน่งของ element โดยอิงความสัมพันธ์กับตำแหน่งขอบด้านในของบราวเซอร์ และจะไม่เคลื่อนเมื่อมีการเลื่อน scrollbar
  ถ้ากำหนด position ของ div1 เป็น fixed และกำหนด left:45px;top;100px; ตำแหน่งของ div1 จะขยับออกจากด้านซ้ายของขอบด้านในของเบราวเซอร์ 45 pixels และขยับออกจากด้านบนของขอบด้านในของบราวเซอร์เท่ากับ 100 pixels

HTML ตารางตัวอย่าง

<table width="500" border="1" cellpadding="0" cellspacing="5" bordercolor="#333333">
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
</table>

ตัวอย่างผลลัพธ์

CSS Code ใช้กำหนด ul และ li

<style type="text/css">
ul.showInColumn{
	display:block;float:left;
	list-style:none;
	padding:0;margin:0;
	width:495px; 
/*	background-color:#FFCCCC;*/
	border:1px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด  ของ table  */	
	padding:2px 0 2px 2px;
}
ul.showInColumn li{
	list-style:none;
	display:block;float:left;
	background-color:#99CC99;
	margin:2px;  /* เทียบใกล้เคียงกับการกำหนด  cellspacing"  ของ table  */
	margin-left:3px;
	padding:0px; /* เทียบใกล้เคียงกับการกำหนด  cellpadding  ของ table  */
	border:1px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด border ใน td ของ table  */
	width:116px; /*  กำหนดความกว้างของแต่ละคอลัมน์  */
}
</style>

HTML การใช้ ul และ li ตัวอย่าง

<ul class="showInColumn">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>

ตัวอย่างผลลัพธ์

การใช้ ul , li ในการสร้างคอลัมน์ให้คล้ายกับการใช้ตาราง สามารถนำไปใช้ในแสดงข้อมูลที่ทำการดึงจากฐาน ข้อมูลมาแสดงเป็นคอลัมน์ เช่น การแสดงสินค้า หรือข่าว เป็นคอลัมน์ โดยที่ CSS จะทำการกำหนดคอลัมน์ให้

ตัวอย่างการใช้งานร่วมกับการดึงข้อมูลจากฐานข้อมูล

PHP code

<ul class="showInColumn">
<?php
$q="SELECT * FROM table ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
<li><?=$rs['data']?></li>
<?php } ?>
</ul>

การทำ CSS Sprite Images เป็นเทคนิคการรวมไฟล์รูปภาพหลายๆ รูปเป็นรูปเดียว แล้วกำหนดการนำมาแสดง
โดยใช้เป็น Backgroud แล้วระบุตำแหน่งของแต่ละรูป เรียกใช้ผ่าน css class (div.class) หรือ css selector (div#selector)

ตัวอย่าง รูปที่รวมกันแล้ว

ผลลัพธิ์การทำ CSS Sprite Images

CSS code ตัวอย่าง

<style type="text/css">
input.iSubmit,input.iSend,input.iClear{
	padding:0;margin:0;border:0;border-collapse:collapse;cursor:pointer;
}
input.iSend{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -1px;
}
input.iSubmit{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -23px;
}
input.iClear{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -45px;
}
</style>

HTML code ตัวอย่าง

<input name="button" type="submit" class="iSubmit" id="button" value=" " />
<input name="button2" type="reset" class="iClear" id="button2" value=" " />
<input name="button3" type="button" class="iSend" id="button3" value=" " />

]]>Sat, 31 Oct 2009 16:51:26 +0700http://www.ninenik.com/ตรึงหัวข้อ_header_ในตาราง_table_ด้วย_css_รองรับ_Firefox_และ_IE-217.htmlตัวอย่าง

CSS Code

<style type="text/css"> 
div#divTblHdFix{
	width:75%;
	height:200px;
	border:1px solid #333333;
	border-width:0 0 1px 0;
	overflow:hidden;
}
table#tblHdFix{
	width:100%;
	height:200px;
	border:1px solid #333333;
}
thead.theadFix{
	background-color:#2DBAC6;
}
thead.theadFix > tr > th{
	color:#FFFFFF;
	border: solid #333333;
	border-width: 0px 1px 1px 0px;	
}
tr.tr-odd{
	background-color:#FFFFFF;
}
tr.tr-odd > td{
	text-align:center;
	border: solid #333333;
	border-width:0px 1px 1px 0px;		
}
tr.tr-even{
	background-color:#EAEAEA;
}
tr.tr-even > td{
	text-align:center;
	border: solid #333333;
	border-width: 0px 1px 1px 0px;			
}
tbody.tbodyShow{
	height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}	
</style>
<!--[if IE]>
    <style type="text/css">
		div#divTblHdFix{
            position: relative;
            width:75%;
            height:200px;
            overflow-y: scroll;
            overflow-x: hidden;
            border:1px solid #333333;
        }
        table#tblHdFix{
            width:100%;
        }
        thead tr {
            position: absolute;
            top: expression(this.offsetParent.scrollTop);
        }
        tbody.tbodyShow{
            height: auto;
        }
    </style>
<![endif]--> 

HTML Code

<div id="divTblHdFix">
  <table border="0" cellpadding="0" cellspacing="0" id="tblHdFix" >
<thead class="theadFix">
        <tr>
          <th>คอลัมน์ที่ 1</th>
          <th>คอลัมน์ที่ 2</th>
          <th>คอลัมน์ที่ 3</th>
          <th>คอลัมน์ที่ 4</th>
        </tr>    
    </thead>
    <tbody class="tbodyShow">
	    
        <tr class="tr-odd">
          <td>ข้อมูลที่ 1</td>
          <td>ข้อมูลที่ 1</td>
          <td>ข้อมูลที่ 1</td>
          <td>ข้อมูลที่ 1</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 2</td>
          <td>ข้อมูลที่ 2</td>
          <td>ข้อมูลที่ 2</td>
          <td>ข้อมูลที่ 2</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 3</td>
          <td>ข้อมูลที่ 3</td>
          <td>ข้อมูลที่ 3</td>
          <td>ข้อมูลที่ 3</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 4</td>
          <td>ข้อมูลที่ 4</td>
          <td>ข้อมูลที่ 4</td>
          <td>ข้อมูลที่ 4</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 5</td>
          <td>ข้อมูลที่ 5</td>
          <td>ข้อมูลที่ 5</td>
          <td>ข้อมูลที่ 5</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 6</td>
          <td>ข้อมูลที่ 6</td>
          <td>ข้อมูลที่ 6</td>
          <td>ข้อมูลที่ 6</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 7</td>
          <td>ข้อมูลที่ 7</td>
          <td>ข้อมูลที่ 7</td>
          <td>ข้อมูลที่ 7</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 8</td>
          <td>ข้อมูลที่ 8</td>
          <td>ข้อมูลที่ 8</td>
          <td>ข้อมูลที่ 8</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 9</td>
          <td>ข้อมูลที่ 9</td>
          <td>ข้อมูลที่ 9</td>
          <td>ข้อมูลที่ 9</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 10</td>
          <td>ข้อมูลที่ 10</td>
          <td>ข้อมูลที่ 10</td>
          <td>ข้อมูลที่ 10</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 11</td>
          <td>ข้อมูลที่ 11</td>
          <td>ข้อมูลที่ 11</td>
          <td>ข้อมูลที่ 11</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 12</td>
          <td>ข้อมูลที่ 12</td>
          <td>ข้อมูลที่ 12</td>
          <td>ข้อมูลที่ 12</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 13</td>
          <td>ข้อมูลที่ 13</td>
          <td>ข้อมูลที่ 13</td>
          <td>ข้อมูลที่ 13</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 14</td>
          <td>ข้อมูลที่ 14</td>
          <td>ข้อมูลที่ 14</td>
          <td>ข้อมูลที่ 14</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 15</td>
          <td>ข้อมูลที่ 15</td>
          <td>ข้อมูลที่ 15</td>
          <td>ข้อมูลที่ 15</td>
        </tr>    
        
	</tbody>
  </table>
</div>

เราสามารถกำหนด ไม่ให้แสดงปุ่มดังกล่าว ในหน้าที่พิมพ์ได้ โดยการใช้ attribute ชื่อ media โดยกำหนด media="print" ดังนี้

แล้วกำหนดการ properties ที่ชื่อ display เป็น none ให้กับ element นั้นๆ ในตัวอย่างนี้กำหนดให้ไม่แสดงแท็ก input เมื่อมีการพิมพ์

CSS Code

<style type="text/css">
div.cDiv{
	margin:auto;
	width:75%;
	background-color:#EAEAEA;
	border:1px solid #999999;
}
div.lDiv{
	float:left;
	width:200px;
	background-color:#FFCC99;
	border:1px solid #999999;	
}
</style>

HTML Code

<div class="cDiv">
test test
test test

<div class="lDiv">
test<br />

test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />

</div>

</div>

ปัญหาจะเกิดกับ Firefox การแก้ปัญหา โดยเพิ่ม

<div style="clear:both"></div>

HTML Code

<div class="cDiv">
test test
test test

<div class="lDiv">
test<br />

test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />

</div>
<!--เพิ่มบรรทัดข้างล่างนี้ก่อนปิด div หลัก-->
<div style="clear:both"></div>
</div>

<style type="text/css">
div.iBannerFix{
	height:50px;
	position:fixed;
	left:0px;
	bottom:0px;
	background-color:#000000;
	width:100%;
	z-index: 99;
}
</style>

HTML Code

<div class="iBannerFix">
<p align="center">กำหนดข้อความ รูปภาพ หรือ ป้ายโฆษณาของคุณที่ตรงนี้</p>
</div>

ตัวอย่าง ดูจากด้านล่าง

ตัวอย่าง กรณีที่ 1
ถ้าตัว selectors เป็นตัวเดียวกัน ค่า CSS ตัวล่าสุดหรือตัวหลังสุด จะถูกนำไปใช้ เช่น

<style type="text/css">
p{ color:#000000;}
p{ color:#FF0000; }
</style>

ตัวอย่าง กรณีที่ 2
ถ้าตัว selectors ของ css ใดมีค่า specificiry มากกว่า ค่าของ css นั้นจะถูกนำไปใช้ เช่น

<style type="text/css">
div p{ color:#000000;}
p{ color:#FF0000; }
</style>

จากค่า CSS ด้านบน จะพบว่าค่าสีของ p จะเป็นสีดำ ทั้งนี้เพราะค่า specificity ของ selectors มีค่ามากกว่า
ซึ่งค่า specificity สามารถคำนวณได้จากค่าดังต่อไปนี้
1.ทุกๆ html selector แต่ละตัวจะมีค่าเท่ากับ 1 เช่น p span ..เป็นต้น
2.ทุกๆ class selector แต่ละตัวจะมีค่าเท่ากับ 10 เข่น .mycss1 เป็นต้น
3.ทุกๆ id selector แต่ละตัวจะมีค่าเท่ากับ 100 เข่น #myid เป็นต้น

ตัวอย่างและการคำนวณ
- p มีค่า specificity เท่ากับ 1 (เพราะมี html selector 1 ตัว)
- div p มีค่า specificity เท่ากับ 2 (เพราะมี html selector 2 ตัว)
- .myclass มีค่า specificity เท่ากับ 10 (เพราะมี class selector 1 ตัว ก็เท่ากับ 1 x 10 =10)
- div p.myclass มีค่า specificity เท่ากับ 12 (เพราะมี html selector 2 ตัว และ class selector 1 ตัว เท่ากับ 1+1+10)
- #myid มีค่า specificity เท่ากับ 100 (เพราะมี id selector 1 ตัว ก็เท่ากับ 1 x 100 =100)
- body #content .alternative p มีค่า specificity เท่ากับ 112 (เพราะมี html selector 2 ตัว class selector 1 ตัว และ id selector 1 ตัว เท่ากับ 1+1+10+100 =112)

เมื่อ css ใดมีค่า specificity มากกว่า ก็จะเลือกใช้ค่า css นั้นๆ

CSS Code

<style type="text/css">
ul.v_menu{ /* กำหนดขอบเขตของเมนู */
	list-style:none;
	margin:0px;
	padding:0px;
	font-family:tahoma, "Microsoft Sans Serif", Vanessa;
	font-size:12px;
}
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูหลัก */
	display:block;
	width:150px;
	height:20px;
	text-indent:5px;
	background-color:#FFCC00;
	border:1px #006633 inset;
	float:left;
	text-align:center;
}
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */
	display:block;
	width:150px;
	height:20px;
	text-indent:5px;
	background-color:#FFFFCC;
	border:1px #006633 inset;
	float:left;
	text-align:center;	
}
ul.v_menu > li > a,ul.v_menu > li > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */
	text-decoration:none;
	color:#666666;
	line-height:20px;
}
ul.v_menu > li > ul{ 
	display:none;
	list-style:none;
	margin:0px;
	padding:0px;
}
ul.v_menu > li:hover > ul { 
	display:block;
	width:150px;
}	
ul.v_menu > li > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */
	display:block;
	width:150px;
	height:20px;
	text-indent:5px;
	background-color:#FFFFCC;
	border:1px #F4F4F4 solid;
	float:left;
	text-align:center;
}
ul.v_menu > li > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */
	display:block;
	width:150px;
	height:20px;
	text-indent:5px;
	background-color:#F4F4F4;
	border:1px #F4F4F4 solid;
	float:left;
	text-align:center;
}
</style>

HTML Code

<ul class="v_menu">
	<li><a href="#">Link menu item 1</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>
			<li><a href="#">Sub menu item 3</a></li>
			<li><a href="#">Sub menu item 4</a></li>
		</ul>	
	</li>
	<li><a href="#">Link menu item 2</a></li>
	<li><a href="#">Link menu item 3</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>
			<li><a href="#">Sub menu item 3</a></li>
			<li><a href="#">Sub menu item 4</a></li>		
			<li><a href="#">Sub menu item 5</a></li>
			<li><a href="#">Sub menu item 6</a></li>
			<li><a href="#">Sub menu item 7</a></li>
			<li><a href="#">Sub menu item 8</a></li>	
		</ul>		
	</li>
	<li><a href="#">Link menu item 4</a></li>			
</ul>

ดูตัวอย่าง

• Link menu item 1
  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3
  • Sub menu item 4
• Link menu item 2
• Link menu item 3
  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3
  • Sub menu item 4
  • Sub menu item 5
  • Sub menu item 6
  • Sub menu item 7
  • Sub menu item 8
• Link menu item 4

CSS Code

<style type="text/css">   
ul.v_menu{ /* กำหนดขอบเขตของเมนู */  
    list-style:none;   
    margin:0px;   
    padding:0px;   
    width:180px;   
    font-family:tahoma, "Microsoft Sans Serif", Vanessa;   
    font-size:12px;   
}   
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */  
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#339900;   
    border:1px #FFFFFF inset;   
}   
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */  
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#FFCC00;   
    border:1px #FFFFFF inset;   
}   
ul.v_menu > li > a,ul.v_menu > li:hover > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */  
    text-decoration:none;   
    color:#FFFFFF;   
    line-height:20px;   
}  
ul.v_menu > li > ul{
	display:none;
    list-style:none;   
	margin-left:180px; 
    padding:0px;   
    width:180px; 
} 
ul.v_menu > li:hover > ul{
	display:block;
    list-style:none;   
	margin:0px;
	margin-top:-21px;
	margin-left:179px; 
    padding:0px;   
    width:180px; 
} 
ul.v_menu > li:hover > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#FFCC00;   
    border:1px #FFFFFF inset;   
}	
ul.v_menu > li:hover > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#000000;   
    border:1px #FFFFFF inset;   
}	
</style> 

HTML code

<ul class="v_menu">  
    <li><a href="#">Link menu item 1</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>
			<li><a href="#">Sub menu item 3</a></li>
			<li><a href="#">Sub menu item 4</a></li>
		</ul>
	</li>  	
    <li><a href="#">Link menu item 2</a></li>  
    <li><a href="#">Link menu item 3</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>
			<li><a href="#">Sub menu item 3</a></li>							
		</ul>	
	</li>  
    <li><a href="#">Link menu item 4</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>						
		</ul>		
	</li>              
</ul>  

ดูตัวอย่าง

• Link menu item 1
  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3
  • Sub menu item 4
• Link menu item 2
• Link menu item 3
  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3
• Link menu item 4
  • Sub menu item 1
  • Sub menu item 2

ตัวอย่างผลลัพธ์