Build HTML Tables Dynamically with PHP Part 3: CSS Alternative

Using HTML tables for design is typically frowned upon in the Web community and the last two posts talked about using tables to display pictures and names in rows of three. For those unfamiliar with the CSS alternative, I didn't want to leave you hanging. So let's look into solving our problem with CSS.

Background

As with the last couple weeks, we'll be working with the database information in the table below. Note that two new names have been added to help with the demonstration.

Since we're no longer using an HTML table, code like the array_chunk() portion isn't needed. We'll still create an array variable to hold the output and use a loop to process the database entries. This time, however, the information will be displayed using an unordered list.

<?php
//INITIALIZE VARIABLES
$htmlOutput = array();
 
//GET PICTURE LIST
$sql = "SELECT datePosted, firstName, lastName, pictureName FROM pictureList ORDER BY datePosted DESC";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()) {
     $htmlOutput[] = "<li><img src='images/{$row['pictureName']}' alt='' /><br />{$row['firstName']} {$row['lastName']}</li>";
}
 
//DISPLAY LIST
print '<ul>' . implode('', $htmlOutput) . '</ul>';
?>

Of course, this only gives us a long vertical list of images and names. We'll need some CSS magic to get similar results as last week.

Styling the List

Since websites commonly have unordered lists, something is needed to target the list of pictures.

<?php
//DISPLAY LIST
print '<ul class="pictureList">' . implode('', $htmlOutput) . '</ul>';
?>

Using the newly created class attribute, let's remove the bullets and spacing typically associated with lists. Note that the following code goes in the CSS portion of the page. If you're unfamiliar with incorporating CSS or need a refresher, check out CSS Tutorial: Starting with HTML + CSS.

<style type="text/css">
.pictureList {
     list-style:none;
     margin:0;
     padding:0;
}
</style>

The list items can then be modified to appear on the same line. We'll also incorporate some space around the images and adjust the text.

<style type="text/css">
.pictureList { list-style:none; margin:0; padding:0; }
.pictureList li {
     float:left;
     font-size:80%;
     margin:0 10px 10px;
     text-align:center;
}
</style>

Next we'll define the image dimensions and add space between the image and the person's name.

<style type="text/css">
.pictureList { list-style:none; margin:0; padding:0; }
.pictureList li { float:left; font-size:80%; margin:0 10px 10px; text-align:center; }
.pictureList img {
     height:130px;
     padding-bottom:1px;
     width:100px;
}
</style>

The list of images is much closer, but we're still not getting the rows of three. The images keep going until the browser window is filled up before wrapping. To get the desired results, we'll need to show CSS where to break the rows. One way is to add a counter to the data collection loop.

<?php
//GET PICTURE LIST
$sql = "SELECT datePosted, firstName, lastName, pictureName FROM pictureList ORDER BY datePosted DESC";
$result = $mysqli->query($sql);
for($i=0; $row = $result->fetch_assoc(); $i++) {
     $htmlOutput[] = "<li><img src='images/{$row['pictureName']}' alt='' /><br />{$row['firstName']} {$row['lastName']}</li>";
}
?>

The counter helps determine where a row begins. A class attribute is added which will cause the first image for each row to appear on a new line.

<?php
//GET PICTURE LIST
$sql = "SELECT datePosted, firstName, lastName, pictureName FROM pictureList ORDER BY datePosted DESC";
$result = $mysqli->query($sql);
for($i=0; $row = $result->fetch_assoc(); $i++) {
     $classAttr = ($i%3) ? '' : ' class="clearFloat"';
     $htmlOutput[] = "<li$classAttr><img src='images/{$row['pictureName']}' alt='' /><br />{$row['firstName']} {$row['lastName']}</li>";
}
?>

Of course, those class attributes aren't going to do anything unless they're defined in CSS.

<style type="text/css">
.pictureList { list-style:none; margin:0; padding:0; }
.pictureList li { float:left; font-size:80%; margin:0 10px 10px; text-align:center; }
.pictureList li.clearFloat {
     clear:left;
}
.pictureList img { height:130px; padding-bottom:1px; width:100px; }
</style>

We should now have rows of three, but you may notice an issue or two depending on how wide your browser window is. When names like Arnold Schwarzenegger stretch wider than the image, spacing between columns gets thrown off. If the names wrap into multiple lines, the images may wrap in weird ways.

To make sure images are positioned as expected, let's define the width of the individual columns and the overall width of the image list.

<style type="text/css">
.pictureList { list-style:none; margin:0; padding:0; width:360px; }
.pictureList li { float:left; font-size:80%; margin:0 10px 10px; text-align:center; width:100px; }
.pictureList li.clearFloat { clear:left; }
.pictureList img { height:130px; padding-bottom:1px; width:100px; }
</style>

Final Code

Note that the following code is missing some essential tags (like <body>).

<style type="text/css">
.pictureList { list-style:none; margin:0; padding:0; width:360px; }
.pictureList li { float:left; font-size:80%; margin:0 10px 10px; text-align:center; width:100px; }
.pictureList li.clearFloat { clear:left; }
.pictureList img { height:130px; padding-bottom:1px; width:100px; }
</style>
 
<?php
//INITIALIZE VARIABLES
$htmlOutput = array();
 
//GET PICTURE LIST
$sql = "SELECT datePosted, firstName, lastName, pictureName FROM pictureList ORDER BY datePosted DESC";
$result = $mysqli->query($sql);
for($i=0; $row = $result->fetch_assoc(); $i++) {
     $classAttr = ($i%3) ? '' : ' class="clearFloat"';
     $htmlOutput[] = "<li$classAttr><img src='images/{$row['pictureName']}' alt='' /><br />{$row['firstName']} {$row['lastName']}</li>";
}
 
//DISPLAY LIST
print '<ul class="pictureList">' . implode('', $htmlOutput) . '</ul>';
?>

Conclusion

So there you have it. An HTML table free design which works constantly across the major browsers.

Related Posts

• Build HTML Tables Dynamically with PHP Part 1
• Build HTML Tables Dynamically with PHP Part 2: Simplify with array_chunk()