Question

我目前在我的灯数据库中有一个表，我想展示产品。但是我展示了产品，但页面看起来不专业。如何使页面更专业？我不想在桌子上展示产品。

我在下面发布了我的代码：

＆＃13;

<?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);
 ?>

＆＃13;

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

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>

Answer 4

尝试使用PDO并使用fetchAll（）： http://php.net/manual/en/pdostatement.fetchall.php

Answer 5

$first = '';$rows=array();    
while($row = mysql_fetch_array($result)){
 if(!$first){
  $first="<tr><th>".implode('</th><th>',array_keys($row)).'</th></tr>';
 }
 $rows[]="<tr><td>".implode('</td><td>',$row).'</td></tr>';
}
$table = "<table class="table">$first".implode("\n",$rows)."</table>";

简单产品HTML http://www.hongkiat.com/blog/html5-single-product-page/

Answer 6

<?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)");
?>

<table style="border:1px solid;">
    <tr style="background:#000;color:#fff;">
        <th>Name</th>
        <th>Image</th>
        <th>Description</th>
        <th>Contact Renter</th>
        <th>Rent price</th>
    </tr>

<?php
    while($row = mysql_fetch_array($result)) {
?>
    <tr>
        <td><?php echo $row['productname'];?></td>
        <td><img src='./images/products/<?php echo $row["productimage"];?>' width='150' height='100' alt=''></td>
        <td><?php echo $row['productdescription'];?></td>
        <td><?php echo $row['rentersdetails'];?></td>
        <td><?php echo $row['rentprice'];?></td>
    </tr>
<?php
    }
    mysql_close($con);
?>

</table>

apply this code.... remember one thing more don't echo html tags. Due to echo/print html tags in php code it will slow your page speed. Your page will take more time for load.

Answer 7

您可以将数据发布到由Div标记组成的响应表中。它看起来像一个大屏幕的桌子，并改变了较小的手机中的个别元素：

<div id = "" class="csstable u-full-width">
<div class="cssthead">
<div class="cssth">ccid</div>
<div class="cssth">administration_title</div>
<div class="cssth">author_id</div>
<div class="cssth">date_created</div>
</div>

<div class="csstbody">
<div class="csstr">
<div class="csslabel">ccid</div><div class="csstd">ccid-5528b9495c6864.97942127</div>
<div class="cssnlbr"></div>
<div class="csslabel">administration_title</div><div class="csstd">ccid-5528b9495c6864.97942127-title</div>
<div class="cssnlbr"></div>
<div class="csslabel">author_id</div><div class="csstd">1</div>
<div class="cssnlbr"></div>
<div class="csslabel">date_created</div><div class="csstd">2015-04-11 08:03:53</div>
<div class="cssnlbr"></div>
</div>

<div class="csstr">
<div class="csslabel">ccid</div><div class="csstd">ccid-5528b992dacfc7.34608410</div>
<div class="cssnlbr"></div>
<div class="csslabel">administration_title</div><div class="csstd">ccid-5528b992dacfc7.34608410-title</div>
<div class="cssnlbr"></div>
<div class="csslabel">author_id</div><div class="csstd">1</div>
<div class="cssnlbr"></div>
<div class="csslabel">date_created</div><div class="csstd">2015-04-11 08:05:06</div>
<div class="cssnlbr"></div>
</div>

</div>

CSS：

/* Larger than tablet */
@media (min-width: 750px)
{   /* border collapse is required for any borders to appear */
.csstable { display: table; border-collapse: collapse; }
.csstr { display: table-row }
.cssthead { display: table-header-group; border-bottom: 2px solid #eaeaea; }
.csstbody { display: table-row-group }
.csstfoot { display: table-footer-group }
.csscol { display: table-column }
.csscolgroup { display: table-column-group }
.csstd  { display: table-cell; padding: 4px; }
.cssth { display: table-cell; font-weight: 600; padding: 0 0 0 4px; }
.csscaption { display: table-caption }
.csslabel{ display: none; }
.cssnlbr{ display: none; }
.csstr:nth-child(even) {
    background-color: #f1f1f1;
}
}

/* smaller than tablet */
@media (max-width: 750px)
{   /* border collapse is required for any borders to appear */
.csstable { display: block }
.csstr { display: block; border: 1px solid #e1e1e1; padding: 4px; margin-bottom: 4px;}
.cssthead { display: none }
.csstbody { display: block }
.csstfoot { display: none }
.csscol { display: block }
.csscolgroup { display: block }
.csstd  { display: inline-block }
.cssth { display: none; font-weight: 600;  }
.csscaption { display: table-caption }
.csslabel{ display: inline-block; font-weight: 600; padding-right:6px; }
.cssnlbr{ display: block; height: 3px;}
}

我没有时间查找和使用代码解析网站。但你可以在my framework development site.

上看到它是如何运作的

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

7 个答案: