php - 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

グリッドに必要な数の列を作成する必要がないため、テーブルの代わりに div を使用したいと思います。1 つの要素の幅を変更するだけで、親要素の幅に応じて隣り合って表示されます。

ここに例があります:グリッドの例

コードは次のようになります

<?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>

それが役に立てば幸い。そして私の英語でごめんなさい:)

Answer 2

<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 3

<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 4

わずかに異なるマークアップですべての代替ユーザーを表示する必要があります。インデックスが偶数のユーザーは行の最初のtd要素として表示され、インデックスが奇数のユーザーはtd行の2番目の要素として表示されます。

<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 5

テーブルのセル内に 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 を追加する必要があります!

編集: 今回は完全に div に基づいており、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>