在PHP foreach循环中使用HTML表创建“网格”

Question

我一直在与Twitter合作，旨在抓取用户的追随者并以网格格式显示它们。下面的图片说明了我是怎么想安排输出：

，我现在有尝试使用HTML表的代码，但它只是打印出了名，那么图片的下面等上。我有一种感觉，我可能不得不使用嵌套表或其他东西，但我无法弄清楚。这里是我的代码：

<table> 
<?php foreach ($users as $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
    ?> 

    <tr> 
     <td> 
     <?php echo $userName; ?> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <?php echo "<img src = ".$userImage.">"; ?> 
     </td> 
    </tr> 
    <?php 
} 
?> 
</table> 

我怎样才能让我的输出看起来像我的图片（名称上面的图片小块在网格中并排排列）？

Answer 1

<table> 
<?php foreach ($users as $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
    ?> 

    <tr> 
     <td> 
     <?php echo $userName; ?> 
     </td> 
     <td> 
     <?php echo "<img src = ".$userImage.">"; ?> 
     </td> 
    </tr> 
    <?php 
} 
?> 
</table> 

请记住，如果你有一个奇数的朋友加入，则最后一个表塞尔将需要添加空白

所以给你一个伪代码示例，你最终会喜欢的东西

<table> 
    <tr> 
    <td> 
     <!-- your data here --> 
    </td> 
    If NumberOfFriends Mod 2 > 0 Then 
    <td> 
     <!-- your data here --> 
    </td> 
    Else 
    <td> 
     <!-- Blank table cell here --> 
    </td> 
    End of If statement 
    </tr> 
</table> 

Answer 2

<div id="container"> 
    <?php foreach ($users as $user) { 
      $userScreenName = $user -> screen_name; 
      $userName = $user -> name; 
      $userImage = $user -> profile_image_url; 
      $userDescription = $user -> description; 
    ?> 
      <div class="user"> 
       <div class="user_name"> 
        <?php echo $userName; ?> 
       </div> 
       <div class="user_image"> 
        <?php echo "<img src = ".$userImage.">"; ?> 
       </div> 
      </div> 
    <?php 
      } 
    ?> 
</div> 

而且你的CSS是这样的：

#container 
{ 
    width: 400px; 
} 

.user 
{ 
    float: left; 
    width:50%; 
} 

.user_name, .user_image 
{ 
    width: 100%; 
} 

Answer 3

您需要显示每个具有稍微不同标记的备用用户。具有偶数索引的用户将显示为连续的第一个td元素，而具有奇数索引的用户将显示为该行中的第二个td。

<table> 
<?php foreach ($users as $i => $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
    if ($i % 2 == 0) : 
?> 

    <tr> 
     <td> 
     <?php 
       echo $userName; 
       echo "<img src = ".$userImage.">"; 
     ?> 
     </td> 

<?php else : ?> 

     <td> 
     <?php 
       echo $userName; 
       echo "<img src = ".$userImage.">"; 
     ?> 
     </td> 
    </tr> 

<?php 
    endif; 
} 
?> 

Answer 4

为什么不包括表的单元格内一个div，与名称的跨度和一开始的CSS或BR新行？你可以用CSS居中单元格的内容

尝试输出是这样的：

<table> 
     <tr> 
      <td> 
       <div> 
        <span class="user-name">NAME</span> 
        <img class="user-face" src=""/> 
       </div> 
      </td> 
      <td> 
       <div> 
        <span class="user-name">NAME</span> 
        <img class="user-face" src=""/> 
       </div> 
      </td> 
     </tr> 
    </table> 

和样式：

 .user-name { 
      width: 10em; 
      display: table-cell; 
      text-align: center; 
     } 
     .user-face { 
      width: 10em; 
      height: 10em; 
     } 

假设，当然，他们有一个甚至多个朋友的.. 。:)如果没有的话，你必须添加一个空的td到最后！

编辑：这个时间完全基于divs并包括PHP。将处理奇数的朋友:)

<div id="user-data"> 
    <?php 
     $cellPosition = "left"; 
     foreach ($users as $user) { 

     $userScreenName = $user->screen_name; 
     $userName  = $user->name; 
     $userImage  = $user->profile_image_url; 
     $userDescription = $user->description; 

     if ($cellPosition == "left") { 
      echo "<div class=\"user-table-row\">\n"; 
     } 

     echo "<div class=\"cell $cellPosition\">\n"; 
     echo " <span class=\"user-name\">$userName</span>\n"; 
     echo " <img class=\"user-face\" src=\"$userImage\"/>\n"; 
     echo "</div>"; 

     if ($cellPosition == "right") { 
      echo "</div>"; 
      $cellPosition = "left"; 
     } 
     else { 
      $cellPosition = "right"; 
     } 
     } 
    ?> 
</div> 

的样式：

<style> 
    #user-data { 
     margin:2em; 
    } 
    div.user-table-row { 
     margin: 2em; 
     width: 24em; 
     clear: right; 
    } 

    div.cell { 
     width:10em; 
     display: table-cell; 
     text-align: center; 
     margin-bottom: 2em; 
    } 
    div.left { 
     float: left; 
    } 
    div.right { 
     float: right; 
    } 

    span.user-name { 
     width: 10em; 
    } 
    img.user-face { 
     width: 10em; 
     height: 10em; 
    } 
    </style> 

Answer 5

我宁愿使用的div insted的表，因为ü不必须创造尽可能多的列在您的网格想，只是改变一个元素的宽度，并且它们相互显示，取决于父元素的宽度。

这里是例子：grids example

因此您的代码西港岛线是这样

<?php foreach ($users as $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
?> 
<div class="name"> 
    <?php echo $userName; ?> 
    <div class="picture"> 
    <img src="./PATH/<?php echo $userImage; ?>" /> 
    </div> 
</div> 
<?}?> 

<style> 
.name { 
    position:relative; 
    float:left; 
    width: 49%; 
    height: 100px; 
    border: 1px solid; 
    text-align:center; 
    vertical-align:middle; 
} 
.picture { 
    width: 80%; 
    height: 60%; 
    display: table; 
    margin: 0 auto; 
    border: 1px solid; 
} 
</style> 

希望它帮助。很遗憾，我的英语:)