จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php
หน้าแรก PHP MySQL เกร็ดความรู้ จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php
การนำข้อมูลมาแสดง โดยจัดรูปแบบ แบ่งเป็น column สามารถทำโดยการใช้ css จัดรูปแบบ หรือ การใช้ตาราง table
หากสามารถจัดรูปแบบ column โดยการใช้ css จะเป็นการดีมาก
แต่หากต้องการความรวดเร็วสามารถใช้ในรูปแบบของตาราง table
ขั้นตอนการจัดคอลัมน์ ด้วยตาราง
1.กำหนดจำนวนคอลัมน์ที่ต้องการ ในที่นี้ใช้ 4 คอลัมน์
2.สร้างตาราง 1 x 4 กำหนดความกว้างตาราง ตามต้องการ (1 แถว x 4 คอลัมน์)
แสดงปกติพิมพ์โค้ดนี้?
<table width="500" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="125"> </td>
<td width="125"> </td>
<td width="125"> </td>
<td width="125"> </td>
</tr>
</table>
3.แทรก php โค้ตดังตัวอย่างต่อไปนี้ (กรณีดึงจากฐานข้อมูล)
แสดงปกติพิมพ์โค้ดนี้?
<table width="500" border="0" cellspacing="2" cellpadding="0">
<?php
$i=1;
$q="SELECT * FROM table ";
$qr=mysql_query($q);
$numItem=mysql_num_rows($qr);
$numCol=4;
$remainCol=$numCol-($numItem%$numCol);
while($rs=mysql_fetch_array($qr)){
?>
<?php if($i%$numCol==1){ ?>
<tr>
<td width="125"><?=$rs['data']?></td>
<?php } ?>
<?php if($i%$numCol==2){ ?>
<td width="125"><?=$rs['data']?></td>
<?php } ?>
<?php if($i%$numCol==3){ ?>
<td width="125"><?=$rs['data']?></td>
<?php } ?>
<?php if($i%$numCol==0){ ?>
<td width="125"><?=$rs['data']?></td>
</tr>
<?php } ?>
<?php $i++; } ?>
<?=($remainCol>0 && $remainCol!=$numCol)?"<td colspan=".$remainCol."></td></tr>":""?>
</table>
แสดงปกติพิมพ์โค้ดนี้?
// คำอธิบาย
// บรรทัดที่ 6 หาจำนวน รายการทั้งหมดที่แสดง
// บรรทัดที่ 7 กำหนดจำนวนคอลัมน์ ตามจำนวนที่ต้องการแสดง
// บรรทัดที่ 8 คำนวนหาจำนวนคอลัมน์ที่เหลือ กรณีข้อมูลแสดงไม่ครบทุกคอลัมน์ในแต่ละแถว
// บรรทัดที่ 11 15 18 และ 21 เงื่อนไขสำหรับแสดงข้อมูลแต่ละ คอลัมน์
// สังเกตว่า เงือนไขสำหรับคอลัมน์แรก ใช้ <?php if($i%$numCol==1){ ?> เงื่อนไข $i%$numCol==1
// และเงื่อนไขสำหรับคอลัมน์ต่อๆ ไปจะเป็น $i%$numCol==2 , $i%$numCol==3 ..... ไปเรื่อย ๆ
// จนถึง เงื่อนไขคอลัมน์สุดท้ายจะต้องกำหนดเป็น $i%$numCol==0 เสมอ
// บรรทัดที่ 26 เงื่อนไขสำหรับกรณ๊ข้อมูลแสดงไม่ครบทุกคอลัมน์
4.เมื่อสามารถแสดงคอลัมน์ข้อมูลได้แล้ว ก็ทำการจัดรูปแบบข้อมูลที่ต้องการแสดง ในแต่ละคอลัมน์ตามต้องการ
โดยอาจแทรกตารางเข้าไปในแต่ละคอลัมน์ เพื่อจัดรูปแบบก็ได้
ขึ้นไปด้านบน