Creating a 'grid' using HTML tables within a PHP foreach loop - php

Question

I've been working with Twitter with the intention of grabbing a user's followers and displaying them in a grid format. The picture below illustrates how I'd like the output to be arranged:
The code that I currently have attempts to use HTML tables, however it just prints out the name, then the picture underneath and so on. I have a feeling I might have to use nested tables or something but I can't figure it out. Here is my code:
<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>
How can I make my output look like my picture (small blocks of name above picture arranged side by side in a grid)?

Answer 1

i would rather use divs insted of tables, because u dont have to create as many columns as you want in your grid, just change the width of one element and they show next to each other, depends on the parents element width.
here is example: grids example
so your code wil look like this
<?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>
hope it helps. And sorry for my english :)

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>
Keep in mind that if you have an odd number of friends to add then the LAST table celle will need to be added and be blank
So to give you a pseudo code example you would end up with something like
<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

You need to display every alternate user with slightly different markup. Users with even numbered indices will be displayed as the first td element in a row, while users with odd numbered indices will be displayed as the second td in the row.
<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 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>
And your css would be like the following:
#container
{
width: 400px;
}
.user
{
float: left;
width:50%;
}
.user_name, .user_image
{
width: 100%;
}

Answer 5

why not include a div inside the table's cells, with a span for the name and a start a new line with css or a br? you can centre the cell's contents with CSS
Try to output something like this:
<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>
and the styles:
.user-name {
width: 10em;
display: table-cell;
text-align: center;
}
.user-face {
width: 10em;
height: 10em;
}
Assuming of course that they have an even number of friends... :) You'll have to add an empty td to the end if not!
EDIT: this time based entirely on divs and including the PHP. Will handle odd numbers of friends too :)
<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>
the styles:
<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>