概述
我在MySql数据库中存储了一些与Products相关的数据。我正在尝试检索此数据并使用HTML表格在页面上显示它。 PHP和MySql运行良好,所有数据都被检索到,但它以非常混乱的方式显示。
以下是我的布局:
我的目标是进一步划分结果表添加更多列行以使数据更具可读性
像这样;
代码: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:
#display{
float:left;
border: 5px solid black;
margin-left:100px;
}
答案 0 :(得分:6)
只需在表格单元格中添加一些填充或边框:
table#display td{
border: 1px solid black;
padding:0 8px;
}
编辑:你还可以做些什么:
<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>
提示:我更喜欢使用while / endwhile;在向用户显示数据时,不要使用括号。
答案 1 :(得分:5)
首先,不要使用PHP回显这么多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"); ?>
<table id='display'>
<?php
while($rows = mysql_fetch_array($sql)) {
?>
<tr><td><?php echo $rows[$product_name]; ?></td>
<!-- And so on-->
<?php
}
?>
</table>
其次,通过查看你的图片,你的桌子似乎需要一个边框,所以请使用
table, td {
border: 1px solid #000000;
}
答案 2 :(得分:1)
添加以下css以在表格单元格上应用边框:
#display td{ border: 2px solid red; }
并可选择添加到#display {:
border-collapse: collapse;