การใช้งาน CSS กำหนดแท็ก ul , li ในการสร้างคอลัมน์ให้คล้ายกับการใช้ตาราง จำเป็นต้องกำหนดค่า CSS ให้เหมาะสม ซึ่งขึ้นอยู่กับการปรับ CSS เป็นสำคัญ ไม่มีรูปแบบตายตัว แต่การกำหนด CSS จะเป็นไปตามรูปแบบ ที่ต้องการ
HTML ตารางตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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 ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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
1 2 3 4 5 6 7 8 9 | <ul class="showInColumn"><?php$q="SELECT * FROM table ";$qr=mysql_query($q);while($rs=mysql_fetch_array($qr)){?><li><?=$rs['data']?></li><?php } ?></ul> |
