CODEWITHSUNDEEP
phphtmlmysqlcss
Tomazi
Tomazi

Reputation: 781

PHP echo tables

Overview

I have some data stored in MySql database related to Products. I am trying to retrieve this data and display it on a page using HTML table. The PHP and MySql has gone well and all the data is retrieved but it is displayed in a very messy manner.

Here is what I have as a layout:

enter image description here

What I am aiming to achieve is to further divide the results table add more columns rows to make the data more readable

Something like this;

enter image description here

The code: PHP, MySQL & HTML:

<?php

    session_start();

    include('connect_mysql.php');


    $product_name = 'product_name';
    $product_qua = 'product_qua';
    $product_price = 'product_price';
    $product_image = 'product_image';
    $product_des = 'product_des';


$sql = mysql_query("SELECT * FROM products");

 echo "<table id='display'>";


while($rows = mysql_fetch_array($sql))
{
    echo"<br>";
    echo"<tr><td>";
    echo"$rows[$product_name]<br></td>";

    echo"<td><img src=$rows[$product_image] height='200px' width='200px'><br></td>";
    echo"<td>Avalible: $rows[$product_qua]<br></td>";
    echo"<td>Price: $rows[$product_price]<br></td>";
    echo"<td>Description: $rows[$product_des]<br></td>";    
    echo"</tr>";

}

echo "</table>";
?>

CSS responsible for this part: 

#display{
    float:left;
    border: 5px solid black;
    margin-left:100px;


}

Upvotes: 0

Views: 60076

Answers (3)

Christophe
Christophe

Reputation: 4828

just add some padding or a border to the table cells:

table#display td{
    border: 1px solid black;
    padding:0 8px;

}

Edit: What you could do as well:

<table id='display'>
<?php while($rows = mysql_fetch_array($sql)): ?>
    <!-- <br>  <- why a break? it's not in the correct spot anyway --> 
<tr><td>
<?php echo $rows[$product_name]; ?><br>
</td>
<td> - </td>
<td><img src="<?php echo $rows[$product_image]; ?>" height='200px' width='200px'><br></td>
<td> - </td>
<td>Avalible: <?php echo $rows[$product_qua]; ?><br></td>
<td> - </td>    
<td>Price: <?php echo $rows[$product_price]; ?><br></td>
<td> - </td>
<td>Description: <?php echo $rows[$product_des]; ?><br></td>
</tr>
<?php endwhile; ?>
</table>

Tip: I prefer to use the while/endwhile; approach rather than using brackets when displaying data to the user.

Upvotes: 6

Scott Yang
Scott Yang

Reputation: 2428

add the following css to apply border on your table cells:

#display td{ border: 2px solid red; }

and optionally add to your #display { :

border-collapse: collapse;

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

First of all don't echo so much HTML using PHP, instead do it like this

<?php
    session_start();

    include('connect_mysql.php');

    $product_name = 'product_name';
    $product_qua = 'product_qua';
    $product_price = 'product_price';
    $product_image = 'product_image';
    $product_des = 'product_des';


$sql = mysql_query("SELECT * FROM products"); ?> 

<table id='display'> 
    <?php 
        while($rows = mysql_fetch_array($sql)) { 
    ?>
       <tr><td><?php echo $rows[$product_name]; ?></td>
       <!-- And so on--> 
     <?php   
        } 
     ?> 
 </table>

Secondly by seeing your inmage, it seems like you need a border for your table so use 

table, td {
   border: 1px solid #000000;
}

Upvotes: 5

Related Questions