Problem with dynamic table in loop WordPress

• SOLVED

I am working on a dynamic table based on a code that I found. The reason why I want to use tables is because I'm creating a grid of posts with unknown heights and the css solutions require too much cross-browser hacking.

The code below displays all the posts vertically in one column, although I need to tell it to have a colSpan of 4 and display the posts left to right and to create a new row for every 4 posts. If I remove the <tr> before the <th>, it displays horizontally, although I can't limit it to 4 columns by placing colSpan="4" in various places.

<?php
$args=array(
'post_type' => 'review',
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { ?>
<TABLE border="0">
<?php
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<tr><th><?php the_post_thumbnail('post-thumbnail'); ?>
<?php endwhile; ?>
</TABLE>
<?php }
wp_reset_query();
?>


Here is where I found my code that I'm working with:
http://wordpress.org/support/topic/dynamic-table-listing-posts-and-using-custom-fields

Hopefully one of you know a solution for this. Thanks in advance for your answers!

Answers (2)

2011-05-20

Kailey Lampert answers:

Try this:

<?php

$args=array(
'post_type' => 'review',
);
$my_query = null;
$my_query = new WP_Query($args);

if( $my_query->have_posts() ) { $i = 1; ?>

<TABLE border="0">

<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

<th><?php the_post_thumbnail('post-thumbnail'); ?></th>

<?php if ($i%4==0) echo '</tr><tr>'; ++$i; endwhile; ?>

</TABLE>

<?php }

wp_reset_query();

?>

---

Jeremy Phillips comments:

That worked perfectly! Thanks so much!

---

Kailey Lampert comments:

No problem - glad to help

2011-05-20

Kristin Falkner answers:

Another route that I think might work would be to do the same thing but append the <tr>'s with jQuery like:

<script>$("th:nth-child(4n)").append("</tr><tr>");</script>

You'd need to call the jQuery library to go this route obviously.

Used with:

<?php

$args=array(

'post_type' => 'review',

);

$my_query = null;

$my_query = new WP_Query($args);

if( $my_query->have_posts() ) { ?>

<TABLE border="0">
<tr>
<?php

while ($my_query->have_posts()) : $my_query->the_post(); ?>

<th><?php the_post_thumbnail('post-thumbnail'); ?></th>

<?php endwhile; ?>
</tr>
</TABLE>
<?php }

wp_reset_query();

?>