Hello, I am trying to create a visualforce page to show the companies we worked with. So I wrote this (basically this board wrote it for me)

<apex:page controller="propinReferences"  sidebar="false"   contentType="text/html" >
<script>
var arraddress= new Array();
var arrid= new Array();
var ref= new Array();
var name= new Array();
var i=0;
var j=0;
document.write('<table border="0px"><tr>');
</script>
<apex:form >
 <apex:repeat value="{!referenceaccounts}" var="acct">
 
    <script>
    //alert('second');
    arraddress[i]='{!acct.name}';
    arrid[i]='{!acct.id}';
    ref[i]='{!acct.Logo__c}';
    name[i]= '{! acct.short_name__c}'

   <!-- ref[i]='<apex:image url="{!acct.Logo_URL__c}" width="50px" height="50px"/>'-->
 document.write('<td><a align="center" valign="bottom" href="https://ap1.salesforce.com/'+arrid[i]+'">'+ ref[i]+'</a></td><td><br /><apex:outputText value="{! acct.name}"/></td>');

     
     j++;
    i++;
    if(j == 5)
   
    {
        document.write('</tr>');
        j=0;
        document.write('<tr>');
    }
   
    </script>
    
 </apex:repeat>
    <script>
        document.write('</tr></table>');
    </script>
</apex:form>

</apex:page>

 But Result makes two columns. I want to display logo and name just below it not nearby. 

How Can I achive this? 

Thanks,