如何使用MySQL查询中的行创建HTML表格布局?

时间:2012-06-15 18:15:29

标签: php mysql html-table

在我的“热门标签”页面上,我使用此PHP&提取数据库中的所有标签。 SQL从最受欢迎到最不受欢迎的顺序:

$sql = "SELECT t.tagid, t.name, t.desc, COUNT(qt.id) AS total
        FROM tags t
        LEFT JOIN question_tags qt ON t.tagid=qt.tag_id
        GROUP BY t.tagid, t.name
        ORDER BY total DESC";

$result = mysql_query($sql) or die(mysql_error());

while($row=mysql_fetch_assoc($result)) {
  echo '<div class="tag-list-box" id="tag-'.$row['tagid'].'">
        <a href="/tags/'.strtolower($row['name']).'" class="tag">
        <span class="label label-inverse label-tag">'.strtolower($row['name']).'</span>
        </a> <strong>&times; '.$row['total'].'</strong><br />
        <p>'.($row['desc']!==null ? $row['desc'] : '<em>This tag has no description.</em>').'</p>
        </div>';
}

我现在没有在HTML表格中使用它,因为我认为我可以使用div和CSS来实现更多“现代方式”,但正如您在下面的截图中看到的那样,当标签有描述时,行会搞乱,因为框的高度大于其他行:

enter image description here

我的框中的CSS是:

.tag-list-box {
  width: 20%;
  padding: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  float: left;
  margin-right: 2%;
  margin-bottom: 10px;
}

我在想我应该把它放在一个应该解决问题的表中,但我的问题是如何让查询中的每4行都有自己的<tr>所以每个都可以有4个表格行?

我无法弄清楚 - 我尝试在while循环中进行计数并递增它,但后来我不知道从那里去哪里。

2 个答案:

答案 0 :(得分:2)

使用模运算符查看您的计数是否可被4整除:

if($count % 4 == 0) 

如果你想保留你的css解决方案,你也可以设置div的高度,然后将overflow设置为hidden来处理太长的描述。

答案 1 :(得分:1)

是的,我会检查你是否有像斯科特所说的那样连续4次。你可以使用div。在每4个之后添加一个清除左浮动的div。我不会使用设定的高度,因为你永远不知道物品的高度。我将做什么的例子:

$count = 0;
while($row=mysql_fetch_assoc($result)) {
  echo '...'; //YOUR CURRENT ECHO STATEMENT HERE
  $count++;
  if($count % 4 == 0) echo "<div style='clear: left;'></div>";
}