Inconsistent CSS Table displaying (Using SQL & PHP)

I've run into the problem that when I echo information Into a table using PHP and HTML from the database the information moves depending on how it loads.

By this I mean if I constantly refresh everything will be different to how it previously was. I mean how it is displayed not what is displayed.

.tracklist {

}
.tracklist img {
max-width:15%;
max-height:15%;
}
.tracklist td{
width:36%;
display:block;
padding:1%;
text-align:center;
}

#content {
width:98%;
height:73%;
padding-left:1%;
padding-right:1%;
background-color:#d8d8d8;
text-align:center;
}
#contentbox {
border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
text-align:center;
background-color:#999999;
}

<div id="content">
<div id="contentbox">
<br />
<table class="tracklist">
<?php


        $i = 0; $trEnd = 0;
        while ($row = mysql_fetch_array($result)){
            if($i == 0){
                echo '<tr>';
            }
            echo '<td>';
                echo $row["genre"]." | ".$row["artist"]." | ".$row["name"];
                echo '<br />';
    echo "<img src=".$row["image"].' />';
        echo '</td>';
            if($i == 2){
                $i = 0; $trEnd = 1;
            }else{
                $trEnd = 0; $i++;
            }
            if($trEnd == 1) {
                echo '</tr>';
            }
        }
        if($trEnd == 0) echo '</tr>';

?>
</table>
</div>
</div>

The data from the database is called in the header just so people know that it is called.