Search code examples
phphtmlcsshtml-tableword-wrap

PHP is outputting table all on one line


The script is supposed to take all of the pictures in a folder and output the first six of them into a table. Then I would like to add a little next button so one can view the rest of the images, but currently the script is just spitting them all out on one line. All of them, not just the six I want. In addition to that the code is also appearing at the bottom of the webpage, below a lot of code that comes after it in the document.

The PHP

<?php

$i = 0;
$directory = 'images/gallery/';
$files1 = scandir($directory);
$x = 0;
$y = 0;
$z = 0; 
echo"<table><tr>";
foreach ($files1 as $filename) {
   if ($z == $x + 6) {
    break 2;
    }
    if ($x==1 || $x==0)
    {
        $x=$x+1;
    }
     else {
        if ($y == $x + 3) {
            echo "<td><a data-lightbox='gallery' href='images/gallery/$filename'><img src='images/gallery/$filename'></a></td></tr><tr>";
            $y = $x;
            $x=$x+1;
        } else {
            echo "<td><a data-lightbox='gallery' href='images/gallery/$filename'><img src='images/gallery/$filename'></a></td>";
            $x = $x+1;
        }
    }
}
?>

The HTML

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
    <title>Perspective by Daniel Streich</title>
    <link rel="stylesheet" type="text/css" href="scripts/css.css">
    <link href="css/lightbox.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" >
</head>
<body>

    <?php
    $active = "Art";
    include ('menu.php');
    ?>

    <div class="wrapperRegular">
        <p class="bigTitle">
            Perspective by Daniel
        </p>
        <p class='actualText'>
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
        </p>
        <?php
        include ('gallery.php');
        ?>
        <br>
        <div id="footer">
            Copyright &#169; Perspective by Daniel
        </div>

    </div>
</body>

The CSS

#wrapperRegular {
margin: auto;
width: 50%;
}
p.bigTitle {
font-family: 'alluraregular';
font-size: 500%;
text-align: center;
color: 898888;
line-height: .33em;
}
p.actualText {
font-family: 'alluraregular';
color: 898888;
font-size: 1.5em;
}

table {
font-family: 'alluraregular';
color: 898888;
font-size: 1.5em;
margin: auto;
text-align: center;
border:5px;
}

Solution

  • You aren't closing the <table> tag in the PHP. This means the the <p>s are going inside the table. Most browsers disagree with this invalid HTML by putting the non-table elements ahead of the table, which is why the table is sinking to the bottom.

    Close the </table> in your PHP and it should work fine.

    Why not try this instead:

    <?php
    
    $directory = 'images/gallery/';
    $files1 = scandir($directory);
    $x = 1;
    echo"<table><tr>";
    foreach ($files1 as $filename) {
       if ($x <= 6) {
           if ($x % 3==0) {
               echo "</tr><tr>";
           }
           echo "<td><a data-lightbox='gallery' href='images/gallery/$filename'><img src='images/gallery/$filename'></a></td>";
           $y = $x;
           $x=$x+1;
       } else {
           break;
       }
    }
    echo"</tr></table>";
    ?>