เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง 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>