เทคนิค 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
