基於php html表格的網格循環

我想在使用PHP循環的html模板中創建一個庫。基於php html表格的網格循環

但是我不得不把圖庫寫成固定表，所以對於每個圖像和間距元素使用<td>。然後在新的一行中，它創建一個新表。

我想我這樣做是爲了避免舊Outlook中的任何問題。

我已經建立了我堅實的HTML佈局，這是我需要它來輸出，見下文......

<!-- 1st row --> 

    <table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center"> 

     <tr> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-1.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-2.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-3.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-4.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

     </tr> 

    </table> 

<!-- 2nd row --> 

    <table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center"> 

     <tr> 
      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-5.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-6.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-7.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <img src="img/image-8.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" /> 
      </td> 
     </tr> 

    </table>

，輸出這個...

enter image description here

我遇到的問題是我可以從1噸o在我的畫廊中無限量的圖像。

所以我的PHP寫起來有點複雜。

這是我在下面的嘗試，但有點rope。。

<?php 

    $images = get_field('image_thumbnails'); 

    if($images): ?> 

    <?php $count = 0; ?> 

    <table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center"> 

     <tr> 

     <?php foreach($images as $image): $count++ ?> 

      <td style="width: 135px; height: 148px;" valign="top"> 
       <a href="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" target="_blank"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" height="135" width="135" style="width: 135px; height: 135px; border: none;" /></a> 
      </td> 

      <?php if ($count %4 == 0) { ?> 

     </tr> 

    </table> 

    <table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">  

     <tr>   

      <?php } else { ?> 

      <td style="width: 13px; height: 148px;"><!-- space --></td> 

      <?php } ?> 


     <?php endforeach; ?> 

     </tr> 

    </table> 

    <?php endif; 

?>

請參閱使用此代碼我testings有：

4圖像

enter image description here

I get this error: end tag for "tr" which is not finished

3 IM年齡

enter image description here

Valid no errors but looks weird cause it spaces out

6圖像

enter image description here

Valid no errors but looks weird cause it spaces out

1圖像

enter image description here

Valid and aligns to the left... weird.

我的問題任何一個可以幫我配一個PHP循環在比我更好的作品，並且不留下任何語法錯誤與任何給定的圖像算不算？

來源

2014-02-26 Joshc

使用array_chunk：

$images = get_field('image_thumbnails'); 
if($images) { 
    $count = count($images); 

    for($i =0; $i < $count % 4; $i++) { 
     // align array 
     array_push($images, array()); 
    } 
    $rows = array_chunk($images, 4); 
    ?> 
    <table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center"> 
     <? 
     foreach($rows as $row) { 
      ?><tr><? 
      foreach ($row as $image) { 
       ?> 
       <td style="width: 135px; height: 148px;" valign="top"> 
        <? if (empty($image)) { 
         ?>&nbsp;<? 
        } else { 
         ?><a href="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" target="_blank"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" height="135" width="135" style="width: 135px; height: 135px; border: none;" /></a><? 
        } 
        ?> 
       </td> 
       <? 
      } 
      ?></tr><? 
     } 
     ?> 
    </table> 
    <? 
}

來源

2014-02-26 12:44:21

感謝邁克爾，這是完美無瑕的。在一張桌子上保存了更好的東西。真的很感激這一點，將在我所有的html畫廊使用這種方法。 – Joshc

嘗試這種解決方案，.. 我不寫整個代碼，但giving you some logic to implement your desired layout ..

<?php 
$count = ceil(mysql_num_rows($query)); //number of tables 

for($i=0;$i<$count;$i++) 
{ 
?> 
    <table> 
    <tr> 
    <?php 
    $num = $j*4; 
    for($j=($num);$j<($num+3);$j++) 
    { 
     echo "<td><img src='".$image."'></td>" 
    } 
    </tr> 
    </table> 
} 
?>

來源

2014-02-26 13:18:21

基於php html表格的網格循環

回答

相關問題