從數據庫的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>