How can the use of tables be avoided for displaying dynamic content like images in PHP?

Using CSS for layout instead of tables is a more modern and flexible approach for displaying dynamic content like images in PHP. By utilizing CSS properties such as flexbox or grid, you can create responsive layouts that adapt to different screen sizes and devices. This method separates content from presentation, making your code more maintainable and accessible. 

<?php
// Sample PHP code to display dynamic images using CSS instead of tables

// Assume $imageUrls is an array of image URLs
$imageUrls = array(
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
);

echo '<div class="image-container">';
foreach ($imageUrls as $imageUrl) {
    echo '<img src="' . $imageUrl . '" class="image">';
}
echo '</div>';
?>

<style>
.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image {
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>

Keywords

HTML CSS Flexbox Grid Responsive design

Related Questions