เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table

<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>

<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>

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