Wordpress latest posts in grid/row form

Question

I'm trying to get my latest posts (index.php) to show in horizontal/grids/rows. Just like this here: http://videos.m-mcconaughey.net with thumbnails/name/views/duration.

My index code:

<?php get_header(); ?>
<div class="article">
   <h1>Last additions</h1>
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>      
   <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
     <td width="130px" valign="top">
        <center><img src="<?php echo get_option('home'); ?>/media/<?php $key="file_name"; echo get_post_meta($post->ID, $key, true); ?>.jpg" class="pictures" alt="" /></center>
     </td>
     <td valign="top">
        <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(''); ?></a></p>
        <?php the_excerpt(); ?>
        <p><strong>User:</strong> <?php the_author() ?> | <strong>Added:</strong> <?php the_time('d M Y'); ?> | <strong>Views:</strong> <?php $key="pvc_views"; echo get_post_meta($post->ID, $key, true); ?> | <strong>Duration:</strong> <?php $key="duration"; echo get_post_meta($post->ID, $key, true); ?><br/><strong>Category:</strong> <?php the_category(', '); ?><br/><strong>Tags:</strong> <?php the_tags(__(' ', ' ') . ' ', ', ', ' '); ?></p>
     </td>
  </tr>
   </table>
   <hr/>
   <?php endwhile; ?>
   <br /><br />
   <center>
  <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 
     else { ?>
  <div class="right"><?php next_posts_link('Next &raquo;') ?></div>
  <div class="left"><?php previous_posts_link('&laquo; Previous') ?></div>
  <?php } ?>
   </center>
</div>
<br /><br />
<?php else : ?>
<h1>Not found</h1>
What you're looking for doesn't exist.
<?php endif; ?>
<?php get_footer(); ?>

Answer 1

try to use this code . I just replace table with div

<?php get_header(); ?>
<div class="article">
   <h1>Last additions</h1>
   <?php if (have_posts()) : ?>
   <div class="container">
   <?php while (have_posts()) : the_post(); ?>      

  <div class="posts">
     <div class="img">
        <center><img src="<?php echo get_option('home'); ?>/media/<?php $key="file_name"; echo get_post_meta($post->ID, $key, true); ?>.jpg" class="pictures" alt="" /></center>
     </div>
     <div class="text">
        <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(''); ?></a></p>
        <?php the_excerpt(); ?>
        <p><strong>User:</strong> <?php the_author() ?> | <strong>Added:</strong> <?php the_time('d M Y'); ?> | <strong>Views:</strong> <?php $key="pvc_views"; echo get_post_meta($post->ID, $key, true); ?> | <strong>Duration:</strong> <?php $key="duration"; echo get_post_meta($post->ID, $key, true); ?><br/><strong>Category:</strong> <?php the_category(', '); ?><br/><strong>Tags:</strong> <?php the_tags(__(' ', ' ') . ' ', ', ', ' '); ?></p>
     </div>
  </div>
   <?php endwhile; ?>
    </div>

   <center>
  <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 
     else { ?>
  <div class="right"><?php next_posts_link('Next &raquo;') ?></div>
  <div class="left"><?php previous_posts_link('&laquo; Previous') ?></div>
  <?php } ?>
   </center>
</div>
<br /><br />
<?php else : ?>
<h1>Not found</h1>
What you're looking for doesn't exist.
<?php endif; ?>
<?php get_footer(); ?>

and css

    .container
    {
    width:100%;
    height:100% 
    }
    .posts {
  width: 29%;
  float: left;
  padding: 10px;
  background: #e2e2e2;
  margin: 4px;
}