format and output all the data from a database table - php

Question

I'm trying to make an page where all the things in the table in the database are displayed on the page. But in a nice format like something ebay where it shows the picture on the left and the title in the middle. Whereas I just have a list.
I can only seem to find tutorials which just echo out all the information which I don't think I can style around to make it look like what I want. I also tried using a variable to store it in, but I only get the last thing in my database showing up.
Here is some of my code:
$query = mysql_query("SELECT * FROM BoatsForRent") or die("Error Searching");
$count = mysql_num_rows($query);
if ($count == 0) {
$output = 'No results found';
} else {
while ($row = mysql_fetch_array($query))
{
$id = $row['boatId'];
$title = $row['title'];
$type = $row['type'];
$address = $row['address'];
$city = $row['city'];
$postcode = $row['postcode'];
$rooms = $row['rooms'];
$decks = $row['decks'];
$price = $row['price'];
$title = $row['title'];
echo "$title<br>";
}
}

Answer 1

To style the output of the table, you can do some CSS like this:
strong {background: #0ff; text-align: right; display: inline-block; width: 50px;}
span {display: inline-block;}
And you need to give your HTML as:
echo "<strong>Title</strong> <span>$title</span><br>";
Preview
Fiddle: http://jsfiddle.net/praveenscience/WBh52/

Answer 2

Use divs, spans or tables to display your data in any way you wish to. Here is an e.g.
<table boder="0" cellspacing="5" cellpadding="5">
<tr>
<td>Boat ID</td>
<td>Title</td>
<td>Type</td>
<td>Address</td>
<td>City</td>
<td>Post Code</td>
<td>Rooms</td>
<td>Decks</td>
<td>Price</td>
</tr>
<?php
$id = $row['boatId'];
$title = $row['title'];
$type = $row['type'];
$address = $row['address'];
$city = $row['city'];
$postcode = $row['postcode'];
$rooms = $row['rooms'];
$decks = $row['decks'];
$price = $row['price'];
$count =mysql_num_rows($query);
if($count == 0){
$output = 'No results found';
} else {
while ($row = mysql_fetch_array($query))
{
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['title']; ?></td>
<td><?php echo $row['type']; ?></td>
<td><?php echo $row['address']; ?></td>
<td><?php echo $row['city']; ?></td>
<td><?php echo $row['postcode']; ?></td>
<td><?php echo $row['rooms']; ?></td>
<td><?php echo $row['decks']; ?></td>
<td><?php echo $row['price']; ?></td>
</tr>
<?php
}
?>
</table>
Alternatively you can put complete table structure inside echo ''. You can now use css either external or inline as per you wish.

Answer 3

You need to put the data into html tags. Here are just some very basic examples. Then you need to use CSS to add styles.
$query = mysql_query("SELECT * FROM BoatsForRent") or die("Error Searching");
$count = mysql_num_rows($query);
if ($count == 0) {
$output = 'No results found';
} else {
while ($row = mysql_fetch_array($query))
{
$id = $row['boatId'];
$title = $row['title'];
$type = $row['type'];
$address = $row['address'];
$city = $row['city'];
$postcode = $row['postcode'];
$rooms = $row['rooms'];
$decks = $row['decks'];
$price = $row['price'];
$title = $row['title'];
echo "<h1>{$title}</h1>";
echo "<h2>{$type}</h2>";
echo "<h3>{$address}, {$city} {$postcode}</h3>";
echo "<p>This boat has {$rooms} rooms and {$decks} decks!</p>";
echo "<p>The selling price is ${$price}</p>";
}
}

Answer 4

The code you have regarded should be in your head section then the output of while should be changed to arrays:
...
while ($row = mysql_fetch_array($query))
{
$id[] = $row['boatId'];
$title[] = $row['title'];
$type[] = $row['type'];
$address[] = $row['address'];
$city[] = $row['city'];
$postcode[] = $row['postcode'];
$rooms[] = $row['rooms'];
$decks[] = $row['decks'];
$price[] = $row['price'];
$title[] = $row['title'];
}
...
In the body section of your page choose good design for a grid or table and use for loop to populate the data:
<table>
<tr>
<td>ID</td>
<td>Title</td>
....
<?php for ($i =0; $i < count($id); $i++){ ?>
<tr>
<td><?php echo $id[$i];?></td>
<td><?php echo $title[$i];?></td>
....
<?php } ?>
</table>