Display data in table

I’m trying to display these items this way:

Howeverafterseveralattemptsthetablealwayslookslikethis:

How do I make the table to get this result?

View

<h2>Apagar evento</h2>
<br>
<table border="1" width "100px" bordercolor="#e2e2e2"  style="word-wrap: break-word" cellpadding="10px">
<tr>
    <?php
    $i=0;
    foreach( $showbills as $showbill ):?>

        <th colspan="2" scope="col">
            <?php echo $this->Form->postLink('Apagar Evento', array('controller'=> 'showbills', 'action'=>'admin_del_event', $showbill['Showbill']['id_showbill']), array('class'=>'event_del', 'title'=>'Apagar Evento'),__('Tem a certeza que quer apagar este Evento?'));?>
        </th>

    <tr>
        <td style="display:inline-block">
            <?php echo $showbill['Showbill']['title'];?>
        </td>
        <td style="display:inline-block">
            <?php echo $this->Html->image('showbill/' . $showbill['Showbill']['image'], array('width' => '189px', 'height' => '267px', 'alt' => $showbill['Showbill']['image']));?>

        </td>
    </tr>
    <?php
        $i++;
        if($i==3){
            echo "</tr><tr>";
            $i=0;
        }
    ?>
    <?php endforeach ?>
</tr>

</table>

The ideal for this case is to use html and

Your View would look like this:

<?php foreach( $showbills as $showbill ):?>
<div class="events">
    <div class="title">
        <?php echo $this->Form->postLink('Apagar Evento', array(
            'controller'=> 'showbills', 
            'action'=>'admin_del_event', 
            $showbill['Showbill']['id_showbill']
        ), array(
            'class'=>'event_del', 
            'title'=>'Apagar Evento'
        ),__('Tem a certeza que quer apagar este Evento?'));?>
    </div>
    <div class="text"><?php echo $showbill['Showbill']['title'];?></div>
    <div class="image"> 
        <?php echo $this->Html->image('showbill/' . $showbill['Showbill']['image'], array(
            'width' => '189px', 
            'height' => '267px', 
            'alt' => $showbill['Showbill']['image']
        ));?>
    </div>
</div>
<?php endforeach ?>

And add the following to your css :

.events {
    width: 300px;
    float: left;
    margin: 0;
    border: 1px solid #ccc;
}

.title {
    color: blue;
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.text {
    width: 140px;
    float: left;
    margin: 0;
    padding: 5px;

}

.image {
    width: 139px;
    float: left;
    margin: 0;
    padding: 5px;
    border-left: 1px solid #ccc;
}

The event class must have exactly 1/3 of the size of your intended content area. You can replace the fixed value by 33%, this way the layout fits the device screen.

Another option would be to use grid-layout tag. to better organize your view .

I recommend reading this article

A good tip is to use the bootstrap, it’s a very easy-to-use css framework ( link

a>)

After adding the framework, you do so:

<div class="row-fluid">
  <div class="span4">imagem 1</div>
  <div class="span4">imagem 2</div>
  <div class="span4">imagem 3</div>
</div>