How can I create an HTML table layout with rows from a MySQL query?

Question

On my "popular tags" page, I am fetching all of the tags from the database with this PHP & SQL in order from most popular to least popular:

$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>';
}

I don't have it in an HTML table right now because I thought I could do it the more "modern way" with divs and CSS, but as you can see in this screenshot below, the rows get messed up when a tag has a description because the height of the box is greater than the others:

enter image description here

My CSS for the boxes is:

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

I am thinking I should put it in a table which should fix the problem but my question is how do I make every 4 rows from the query have their own <tr> so there can be 4 in each table row?

I can't figure it out — I tried doing a count and incrementing it in the while loop but then I just don't know where to go from there.

Looks like somebody is trying to create a mini-SO, no?

nickb
– nickb

2012-06-15 18:19:29 +00:00
Commented Jun 15, 2012 at 18:19 — nickb
– nickb, Commented Jun 15, 2012 at 18:19

Scott Saunders · Accepted Answer · 2012-06-15 18:17:03Z

2

Use the modulo operator to see if your count is divisible by 4:

if($count % 4 == 0)

If you want to keep your css solution, you can also set a height for your divs and then set overflow to hidden to handle descriptions that are too long.

answered Jun 15, 2012 at 18:17

Scott Saunders

30.5k14 gold badges60 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Damien Pirsy Over a year ago

If JS is an option, he could also add an equal height mechanism, it would be a nice addition (and to me, better than having text cut by the hidden overflow)

Nathan Over a year ago

@DamienPirsy I could do that (and yes JS is an option), but I don't think the descriptions will be that long. Thanks for the idea though :)

Nathan Over a year ago

I'm having a little problem (I'm probably just not doing it right), it is doing this: dl.dropbox.com/u/25819920/… Here's the code: dl.dropbox.com/u/25819920/…

Pitchinnate · Accepted Answer · 2012-06-15 18:47:55Z

1

Yeah I would check to see if you have 4 in a row like Scott said, however. You can use divs. After every 4 just add a div that clears the left float. I would NOT use a set height because you never know how tall the items will get. Example of what I would do:

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

answered Jun 15, 2012 at 18:47

Pitchinnate

7,5561 gold badge22 silver badges39 bronze badges

Collectives™ on Stack Overflow

How can I create an HTML table layout with rows from a MySQL query?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related