Стилирование таблицы HTML из базы данных

Question

Мне нужно, чтобы результаты запроса, отображаемого в таблице, выглядели как прототип макета, показанный ниже.

Я просто хочу знать, как сделать картинка слева. И Сэндвич Название и Цена для размещения в верхней части и описание под ним.

Я использую Еогеасп эхо запроса в виде таблицы.

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>"; 
 
       }

Mine в настоящее время показывает это:

Answer 1

Есть несколько способов сделать это: вложенные таблицы RowSpan CSS

Это все зависит от того, что вы хотите.

RowSpan

{ 
    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; 
} 

Вы можете пла у результата в этой ручке: 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>