PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

08 November 2009 By
css ตาราง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css ตาราง



การใช้งาน 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>







Tags:: ตาราง css






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง