从数据库的HTML表格样式

Question

我需要使表中出现的查询结果看起来像下面显示的布局原型。

我只是想知道如何使左侧的图片。并且三明治名称和价格被排在最上面并且说明在它下面。

我使用的foreach呼应在一个表中查询。

foreach ($rows as $row) 
 
       { 
 
        echo "<tr>"; 
 
        echo "<td><img src=" . $row["image_file"] . "></td>"; 
 
        echo "<td>" . $row["productname"] . "</td>"; 
 
        echo "<td>" . $row["description"] . "</td>"; 
 
        echo "<td>" . $row["price"] . "</td>"; 
 
        echo "</tr>"; 
 
       }

矿目前呈现这样：

Answer 1

有几种方法可以做到这一点： 嵌套表 行跨度 CSS

这一切都取决于什么你要。

行跨度

{ 
    echo "<tr>"; 
    echo "<td rowspan='2'><img src='" . $row["image_file"] . "'></td>"; 
    echo "<td>" . $row["productname"] . "</td>"; 
    echo "<td>" . $row["price"] . "</td>"; 
    echo "</tr>"; 
    echo "<tr>";  
    echo "<td colspan='2'>" . $row["description"] . "</td>"; 
    echo "</tr>"; 
} 

Answer 2

你不需要呼应每一行，你需要逃避你正在使用的HTML与PHP报价为准。有关如何可以这样做的... ...样品

<?php 
$rows = array(array('image_file' => "1", 'productname' => 't', 'description' => 'scription', 'price' => '1')); 
foreach ($rows as $row) { 
    echo '<tr>' . 
    '<td><img src="'. $row["image_file"] . '"></td>'. 
    '<td>' . $row["productname"] . '</td>'. 
    '<td>' . $row["description"] . '</td>' . 
    '<td>' . $row["price"] . '</td>'. 
    '</tr>'; 
} 

输出：

<tr><td><img src="1"></td><td>t</td><td>scription</td><td>1</td></tr> 

Answer 3

你可以做到这一点通过以下方式，通过CSS的手段，而不是嵌套的表格：

<table> 
<tr> 
    <td>Image</td> 
    <td> 
    <header><h2>Italian</h2><h3>7.99€</h3></header> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero neque adipisci, necessitatibus dicta provident voluptates, laboriosam asperiores ratione eveniet. Perspiciatis doloribus, ducimus non architecto ut laudantium, at necessitatibus nulla voluptatum.</p> 
    </td> 
</tr> 
</table> 

而且

h2 { 
    float:left; 
} 
h3 { 
    float:right; 
} 
header:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

您可以PLA Ÿ结果在此笔：http://codepen.io/anon/pen/oXNomR

随着你的PHP代码，这将是：

foreach ($rows as $row){ 
    echo "<tr> 
      <td><img src=".$row["image_file"]."></td> 
      <td> 
      <header> 
       <h2>".$row["productname"]."</h2> 
       <h3>".$row["price"]."</h3> 
      </header> 
      <p>".$row["description"]."</p> 
      </td> 
     </tr>"; 
} 

Answer 4

使用CSS FLOAD元素，而不是表元素

<div style="display:block"> 
    <img style="width:300px;height:300px;fload:left" /> 
    <div class="detail" style="width:600px;height:300px;fload:left"> 
     <div class="title" style="width:600px;height:50px"> 
      <div class="name" style="width:500px;height:50px;float:right"> 
       Food name 
      </div> 
      <div class="price" style="width:100px;height:50px;float:right"> 
       Price 
      </div> 
     </div> 
     <div class="content"> 
      Description 
     </div> 
    </div> 
</div>