Question

我正在使用php / mysql，并且有一个带有图片网址的数据库表。我想知道如何将它们放在带有3 x 3表的php页面上，这样每个td将根据数据库中的图像URL显示不同的图像？

我想创建这样的字母，其中字母是图像：

|a|b|c|
|d|e|f|
|g|h|i|

到目前为止，我只能使用do while来创建这样的东西：

|a| | |
|b| | |
|c| | |

感谢。

Answer 1

这将是一般方法：

$query = "SELECT url FROM images LIMIT 9";
$resource = mysql_query($query);

# Get the number of images
$count = mysql_num_rows($resource);

$i = 0;
$per_row = 3;

# Start outputting the table
echo '<table><tr>';
while($row = mysql_fetch_assoc($resource)) {
    # The image cell
    echo '<td><img src="'.$row['url'].'" /></td>';
    # If three cells have been printed, and we're not at the last image
    if(++$i % $per_row == 0 && $i > 0 && $i < $count) {
        # Close the row
        echo '</tr><tr>';
    }
}

# If the last row isn't 'full', fill it with empty cells
for($x = 0; $x < $per_row - $i % $per_row; $x++) {
    echo '<td></td>';
}
echo '</tr></table>';

也就是说，只是正常循环结果，但是在每三个项目上，回显行变化（</tr><tr>）。只需确保不在开头或结尾打印额外的行更改，因此需要附加条件。

结果表应该是这样的（添加换行符）：

<table>
    <tr>
        <td><img src="image.jpg1" /></td>
        <td><img src="image.jpg2" /></td>
        <td><img src="image.jpg3" /></td>
    </tr>
    <tr>
        <td><img src="image.jpg4" /></td>
        <td><img src="image.jpg5" /></td>
        <td><img src="image.jpg6" /></td>
    </tr>
    <tr>
        <td><img src="image.jpg7" /></td>
        <td><img src="image.jpg8" /></td>
        <td><img src="image.jpg9" /></td>
    </tr>
</table>

Answer 2

使用计数器跟踪您已经显示的图像数量，并且每3张图像仅发出</tr><tr>个图像。提示：$count % 3

Answer 3

你真的不需要用表来做这件事（考虑一下，你只是想在网格中显示一些东西，你并不是真的想要创建一个表格。）

使用一点CSS就可以这样做（如果你使用html5-shiv for MSIE，你可以使用适当的HTML5元素）：

<div class="figure">
<img src="mypic.jpg" alt="">
<div class="description">Description goes here</div>
</div>

并在CSS中：

.figure {
float: left;
margin-right: 10px; /* for space between the columns */
padding: 5px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.figure .description {
margin-top: 1em;
font-variant: italic;
}

如果它们都是相同的大小并且你想强制它们进入NxN网格，你可以将它们包装在div（class =“grid”）中做类似的事情（3x3网格，100px内部图形宽度（即90px）图像宽度））：

.grid {
padding-left: 10px; /* to mirror the right margin of the last .figure in the row */
width: 350px; /* 3*100px + 2*10px margin + 3*2*5px padding */
}
.figure img {
width: 90px;
}

这样你就可以简单地在循环中依次输出图像，而不必担心包裹行的位置（包裹由CSS处理;如果不强制网格具有最大宽度，它将会换行浏览器窗口的右端。）

如何将图像放在3×3的桌子上？

3 个答案: