Display MySQL query result as HTML tables per row

Question

I tried to search but didn't find anything that would help me so I created a new thread.

I have MySQL database with several columns. Each row is a separate set of data for one item. Right now I have managed to display it pretty close as to what I want, but to have a better view I need to have it formatted as a two column table where first Column is the title of the database column as its full name and the second column contains the responding values.

database format:
| col1 | col2 | col3 | col4 |
| tex1 | tex2 | tex3 | tex4 |
| tex5 | tex6 | tex7 | tex8 |

http://oi61.tinypic.com/23gzmec.jpg

Right now I see the output as:

Col1 full namex: tex1
Col2 full namexxxxxxxxxxx: tex2
Col3 full namexxxx: tex3
Col4 full namexxxxxxxxxxxxxxxxxxx: tex4

Col1 full namex: tex5
Col2 full namexxxxxxxxxxx: tex6
Col3 full namexxxx: tex7
Col4 full namexxxxxxxxxxxxxxxxxxx: tex8

http://oi58.tinypic.com/2el8ksl.jpg

the "x"-s give the visually comparable image of column names with different length. But I want to have it as a table where the "tex" values start all from the same distance which would be the longest column name label length or a preset width of the first column of the table.

Visually I want it to look more like this:

Col1 full name: | tex1
Col2 full name: | tex2
Col3 full name: | tex3
Col4 full name: | tex4

right now my code looks like this:

<?php
$servername = "mysqlsite";
$username = "admin";
$password = "password";
$dbname = "mydb";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT btitle, basin, busurl, bukurl, bimageurl, bauthor, bauthoremail, bauthorbio, bgenre, bsdesc, bldesc  FROM book_info";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
   while($row = $result->fetch_assoc()) {
    echo    "<strong>Title: </strong>" .$row["btitle"].
            "<br><strong>ASIN: </strong>" .$row["basin"]. 
            "<br><strong>US URL: </strong>" .$row["busurl"]. 
            "<br><strong>UK URL: </strong>" .$row["bukurl"]. 
            "<br><strong>Image: </strong>" .$row["bimageurl"]. 
            "<br><strong>Author: </strong>" .$row["bauthor"]. 
            "<br><strong>Author Bio: </strong>" .$row["bauthorbio"]. 
            "<br><strong>Genre: </strong>" .$row["bgenre"]. 
            "<br><strong>Short Description: </strong>" .$row["bsdesc"]. 
            "<br><strong>Long Description: </strong>" .$row["bldesc"]. 
            "<br><br><br><br>";
    }
} else {
echo "0 results";
}
$conn->close();
?>

I got this code from w3schools and modified it to suit my needs, but nothing good happened when I tried to change it to show as a table.

Can someone help?

Answer 1

You should use the HTML <table> markup. In your case it would look something like this:

<table>
  <tr><!-- This is a table row -->
    <td> <!-- This is a column inside a row -->
      ASIN:
    </td>
    <td>
      YourValueOrWhatever
    </td>
   </tr>

   <!-- Include the same markup for all rows here -->

</table>

Answer 2

Go like this...and place your data accordingly..

<table>
<tr>
<th> <!--your table headers -->
...
</th>
 while($row = $result->fetch_assoc()) {
<tr>
echo '<td>'.$row["btitle"].'</td>';
echo '<td>'.$row["basin"].'</td>'; //your table data
echo '<td>'.$row["busurl"].'</td>';
...
</tr>
}
</table>

Answer 3

If you want tabular data, then why are you not building a table? You can removed the borders if you do not want to see them. That way, the column cells will adjust to the longest title, and the text cells will start after that.

<table>
  <tr>
  <td>Col 1</td>
  <td>tex1</td>
  </tr>
  <!-- Create other rows the same way -->
  </table>

You either put the styling in line with the style attribute or create classes and/or ids and add a css style sheet.

Answer 4

Thanks to Moid Mohd I got it working, but it needed some additional tinkering to be error-free. So I'm posting the working code just so someone who has this problem in the future can see the solution also.

    echo "<table><tr><th>table headding</th></tr>";
    while($row = $result->fetch_assoc()) {

    echo    "<tr><td><strong>Title:</strong></td><td>" .$row["btitle"]."</td></tr>";
    echo    "<tr><td><strong>ASIN:</strong></td><td>" .$row["basin"]. "</td></tr>";
    echo    "<tr><td><strong>US URL:</strong></td><td>" .$row["busurl"]."</td></tr>" ;
    echo    "<tr><td><strong>UK URL:</strong></td><td>" .$row["bukurl"]."</td></tr>" ;
    echo    "<tr><td><strong>Image URL:</strong></td><td>" .$row["bimageurl"]."</td></tr>" ;
    echo    "<tr><td><strong>Author:</strong></td><td>" .$row["bauthor"]."</td></tr>" ;
    echo    "<tr><td><strong>Author Email:</strong></td><td>" .$row["bauthoremail"]."</td></tr>" ;
    echo    "<tr><td><strong>Author Bio:</strong></td><td>" .$row["bauthorbio"]."</td></tr>" ;
    echo    "<tr><td><strong>Genre:</strong></td><td>" .$row["bgenre"]."</td></tr>" ;
    echo    "<tr><td><strong>Short Description:</strong></td><td>" .$row["bsdesc"]."</td></tr>" ;
    echo    "<tr><td><strong>Long Description:</strong></td><td>" .$row["bldesc"]. "</td></tr>";
    echo    "<tr><td><br><br></td></tr>";

    }
    echo "</table>";