如何在没有表格的情况下显示数据库中的产品？

Question

我目前在我的lamp数据库中有一个表，我想要展示产品。然而，我已经展示了产品，但页面看起来不专业。如何让页面更专业？我不想在表格中显示产品。

我已经发布了我的代码如下：

​

<?php
 $con = mysql_connect("localhost","sam","");
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }
mysql_select_db("products", $con);
$result = mysql_query("SELECT * FROM Products_table WHERE catid IN (1,2,7,8)"); 

echo "<table border='1'>
 <tr>
 
 <th>Name</th>
 <th>Image</th>
 <th>Description</th>
 <th>Contact Renter</th>
 <th>Rent price</th>
 </tr>";


while($row = mysql_fetch_array($result))
   {
   echo "<tr>";
   echo "<td>" . $row['productname'] . "</td>";

	
   echo "<td><img src='./images/products/".$row['productimage']."' width='150' height='100' alt=''></td>";
  echo "<td>" . $row['productdescription'] . "</td>";	
   echo "<td>" . $row['rentersdetails'] . "</td>";
   echo "<td>" . $row['rentprice'] . "</td>";
   echo "</tr>";
echo <<<"buttons"
  <td>
     <input class="button_normal" type="button" value="Google Renter" onclick="window.open('https://www.google.co.uk/')"/>; 
     <input class="button_normal" type="button" value="Yahoo" onclick="window.open('https://www.yahoo.co.uk')"/>
  </td>    
buttons;
   }
 echo "</table>";
 mysql_close($con);
 ?>

​

Answer 1

您可以将结果放在一个变量中：

<?php
 $con = mysql_connect("localhost","sam","");
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }
mysql_select_db("products", $con);
$result = mysql_query("SELECT * FROM Products_table WHERE catid IN (1,2,7,8)"); 

$results = array();
while($row = mysqli_fetch_assoc($query)){
     $results[] = $row;
}

 mysql_close($con);
 ?>

像这样调用你的$results数组：

$results[0]['value']

或者在森林里

foreach($results as $row => $value) {
    //display your data however you like
}

Answer 2

你说“不专业”是什么意思？您可以使用css设置表格的样式。或者创建带有块或内联块显示属性的div的网格。

Answer 3

你有没有考虑过使用BootStrap CSS？我知道你不想使用表格来显示数据，但是添加BootStrap或其他CSS模板会让它看起来不那么“丑陋”，也不像“表格”。除此之外，也许可以使用列表？或其他数据结构？

http://getbootstrap.com/css/#tables

添加它应该非常简单，你甚至可以使用下面他们提供的CDN中的链接。希望这能有所帮助！

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>