Outputting Data into an HTML table using php/html

Question

I am trying to output data onto my webpage from a database. I am able to so successfully, but in a very untidy way. I have tried to put the data in a table on the website with no success.

Below, data is retrieved from the db, but just echoed out crudely. It looks untidy but it outputs successfully onto the webpage

 <?php
        $query = "SELECT name, email, address FROM SHHowners";
        $result = mysqli_query($conn, $query);

        if (mysqli_num_rows($result) > 0) {
            // output data of each row
            while ($row = mysqli_fetch_assoc($result)) {
                echo "Name: " . $row["name"] . " - Email: " . $row["email"] . " - Address: " . $row["address"] . "<br>";
            }
        } else {
            echo "0 results";
        }


        mysqli_close($conn);

I try to put the data into an HTML table(on the same page, by combining PHP and HTML with no success. How can put this data into an organised table successfully?

 <div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><?php $row["name"] ?></td>
        <td><?php $row["email"] ?></td>
        <td><?php $row["address"]?></td>
      </tr>
    </tbody>
  </table>
</div>

Below is roughly how I would like the data to be structured, how can achieve this?

Name  | Email | Address
Jo    |J@o.com|12 Street
Ben   |B@e.com|23 street

Answer 1

try this:

<div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
<?php 
while ($row = mysqli_fetch_assoc($result)) {
?>
      <tr>
        <td><?php $row["name"] ?></td>
        <td><?php $row["email"] ?></td>
        <td><?php $row["address"]?></td>
      </tr>
<?php } ?>
    </tbody>
  </table>
</div>

Answer 2

Try below code :

<div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
    <?php
      $query  = "SELECT name, email, address FROM SHHowners";
      $result = mysqli_query($conn, $query);
      if (mysqli_num_rows($result) > 0) {
       // output data of each row
       while ($row = mysqli_fetch_assoc($result)) { ?>
          <td><?php $row["name"]?></td>
          <td><?php $row["email"]?></td>
          <td><?php $row["address"]?></td>
      <?php }
          } ?>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

<?php
        $query = "SELECT name, email, address FROM SHHowners";
        $result = mysqli_query($conn, $query);
?>
 <div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead> <tbody>
<?php
        if (mysqli_num_rows($result) > 0) {
            // output data of each row
            while ($row = mysqli_fetch_assoc($result)) { 
?>
      <tr>
        <td><?php $row["name"] ?></td>
        <td><?php $row["email"] ?></td>
        <td><?php $row["address"]?></td>
      </tr>
<?php            }
        } else {
            echo "<tr><td colspan=3>0 results</td></tr>";
        }
        mysqli_close($conn);
?>
    </tbody>
  </table>
</div>

Answer 4

You can always print the results from the select like this:

while ($row = mysqli_fetch_assoc($result)) {
   echo "<tr>
<td>".$row["name"]."</td>

<td>".$row["email"]."</td>

<td>".$row["address"] . "</td></tr>";

}

It's not a very clean way, but for each row should print another row, below the three table headers.

Answer 5

There isn't really a very neat way to do this beyond the other answers.

But what you can do is keep the HTML and PHP separate as much as possible in the same file.

The PHP at the top of the file can be as follows:

$query = "SELECT name, email, address FROM SHHowners";
$result = mysqli_query($conn, $query);

$htmlToDisplay = ''; //this variable will contain table rows

if (mysqli_num_rows($result) > 0) {
  // output data of each row
  while ($row = mysqli_fetch_assoc($result)) {
   //create the HTML row - we'll use this later
   $htmlToDisplay .= "<tr><td>".$row['name']."</td><td>". $row['email']."</td><td>".$row['address']."</td></tr>";   
  }
} else {
  $htmlToDisplay = "<tr><td>0 results</td><tr>";
}

Then you can have your HTML after your closing PHP tag ( ?> ) as follows:

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <!-- echo your php row(s) here in a slightly neater way since it's one line -->
    <?php echo $htmlToDisplay; ?> 
  </tbody>
</table>

This will make the the different parts of the file (the PHP and HTML ) more readable.

You could also look at using a PHP template engine like smarty .