Question

I am trying to display images vertically 5 per row using php and I have achieved it.
I am also using a div and this seems to be creating a problem.
Images are displayed horizontally, but there seems to be a huge space between each image.

Heres the php code:

<table width="500" border="0" cellpadding="2" cellspacing="3">
    <tr>
    <?php
    // get the images for the new videos

    $query = "SELECT * FROM videos";
    $result = mysql_query($query);
    $numimages = 0;
    while ($row = mysql_fetch_assoc($result)) {
        extract($row);
        // extract youtube id

        preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
        // $matches[ 1 ] should contain the youtube id
    ?>
        <td valign="top">
            <div id="videogallery">
                <a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&amp;rel=0&amp;enablejsapi=1&amp;playerapiid=ytplayer" title="<?php echo $video_title;?>">
                    <img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
                </a>
            </div> 
        </td>
        <?php 
        $numimages++;
        if ($numimages%3 == 0) 
            echo "</tr><tr>";
    }
    ?>
    </tr>
</table>

This is the css:

    #videogallery {
    width:500px;
    zoom:1;
}
#videogallery span{
    display:block;
}
#videogallery a{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    position:relative;
    vertical-align:top;
    margin:3px;
    width:160px;
    font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-weight:normal;
    color:#333333;
    text-decoration:none;
    text-align:center;
    opacity:0.87;
}
#videogallery a img{
    display:block;
    border:none;
    margin:0;
}
#videogallery a:hover{
    opacity:1;
}

Answer 1

I have noticed a few things. First, ids must be unique in html, but they are not in your document. You create <div id="videogallery"> in a loop, so that id appears multiple times. You should change the id into a class (or remove the div completely).

Also #videogallery is set to have a width of 500 pixels, which is also the width of the containing table. If you plan to have 5 images next to each other, the width of a div (or an image) should not exceed 100 px. Reducing the width should already help you to reduce the gap between images.

It’s generally not a good idea to use tables for layout, it should be possible to get the same effect without tables. That gives you more flexibility. (Determining the number of images per row should be a layout issue, not a code issue.)