0

概要

製品に関連する MySql データベースにいくつかのデータが保存されています。このデータを取得し、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;


}
4

3 に答える 3

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 を使用することを好みます。ユーザーにデータを表示するときに括弧を使用するのではなく、アプローチを使用します。

于 2013-03-10T08:42:31.083 に答える
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;
}
于 2013-03-10T08:40:47.073 に答える
1

次の css を追加して、表のセルに境界線を適用します。

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

オプションで #display { に追加します。

border-collapse: collapse;
于 2013-03-10T08:42:24.627 に答える