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

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

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>