How to show all files from DB horizontaly using php?

Question

I have Uploaded files to a directory and in database and i want to show the files in the browser and make the downloadable but on one file is showing in the browser. How it shows one file in browser . Here is how the database looks like Database . Here is the Directory of my Files Image Directory And the code that i wrote

<?php
     $Year = mysqli_query($link, "SELECT distinct `Year` FROM `returndocs` WHERE EmailAddress='$name'");
     $Returns = 'Returns';
     if($Year->num_rows>0)
         {
            while ($row=$Year->fetch_assoc())
                {
                   echo "<button type='button' class='collapsible'>
                           <div style='display:flex'>
                              <div><img src='../Assets/images/icons/folder-icon.png' width='18' height='18'></div>
                                <div style='margin-left:5px;'>".$row['Year'].' '.$Returns."</div>
                           </div>
                         </button>";
                }
          }
     else{
             echo "<h6 style='color:#bf9038;'>No returns Submitted!</h6>";
         }
// Viewing files from Db and from directory 
$SelectUploadedFiles = mysqli_query($link, "SELECT * FROM `returndocs` where EmailAddress='$name';");
if($SelectUploadedFiles->num_rows > 0)
   {
       while($file=$SelectUploadedFiles->fetch_assoc())
            {
               echo "<div class='content'>
                      <table>
                          <tr><a href=".$file['ReturnDir']." download>".$file['ReturnName']."</a></tr>
                      </table>
                  </div>";
             }
    }
?>

How can i make the images horizontally styled ie movies.txt followed by procurement.pdf etc. like this Procument file should be under movies.txt .

Answer 1

Define your table outside of the loop and inside the loop only the rows.

Example:

if($SelectUploadedFiles->num_rows > 0) {
    // Define the div and table opening elements
    $ouput = '<div class="content"><table>';
    while($file=$SelectUploadedFiles->fetch_assoc()) {
        // Append for each entry a new table row
        $output .= '<tr><td><a href="' . $file['ReturnDir'] . '"> ' . $file['ReturnName'] . '</a></td></tr>';
    }
    // Close the table and div elements
    $output .= '</table></div>';
    // Show the table
    echo $output;
}

Btw. Your code is vulnerable for SQL injections!

Answer 2

I saw you got the answer for this but I would like to add some additional information to that;

It is always advisable to avoid tables in HTML these days as they have got many problems, which could be easily handled by other HTML tags like ul, li etc.

For more details : https://www.lifewire.com/dont-use-tables-for-layout-3468941

If you look at most modern websites its div and ul that is used the most as they have less code, flexible and easy to manage. Again, HTML is just to put your data in place.

Here you want to display them horizontally, which should be a task assigned to CSS . It's so simple, all you have to do is use flex and mention the way you want and it does that for you in the most simple and faster way.

 ul li{ display:block; text-decoration:none; } ul{ display:flex; flex-direction: column; } .reverse { flex-direction:column-reverse; }

 <h4>Listing Horizontally</h4> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <h4 >Listing Horizontally in Reverse</h4> <ul class="reverse"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

That's it..Always use the backend to fetch data and display that's it period. How to display is CSS

Hope this makes sense for you ...