Tables in het index bericht

Hee iedereen,

Ik ben op het moment bezig met het indelen van mijn index bericht, maar kom er niet uit. Ik gebruik de code uit dit topic, maar die staat pontificaal in het midden:


Ik had er graag nog dingen naast willen plaatsen, dus probeerde ik een table er omheen te bouwen. De code bestaat echter al uit heel veel tables en de code raakt in de war. Kan iemand mij helpen om de code zo te bouwen dat de gymleiders aan de linker kant staan en ik nog twee kolommen ernaast heb aan de rechterkant?

Dit is de huidige code:

Code:

<span style="font-family: mistral, script, georgia;font-size: 35px;"> Gymleiders</span><br />  <style type="text/css">.infohover {opacity: 0; padding-top: 0px;  transition: opacity .5s ease-in-out;  -moz-transition: opacity .5s ease-in-out;  -webkit-transition: opacity .5s ease-in-out; }.infohover:hover {opacity: 0.8; padding-top: 0px; transition: opacity .5s ease-in-out;  -moz-transition: opacity .5s ease-in-out;  -webkit-transition: opacity .5s ease-in-out; }</style>    
<table>
                                
 <tbody>
                                            
 <tr>
                                            
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://r12.imgfast.net/users/1212/23/43/92/avatars/1-23.png); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       Admin                      
 </div>
                       Brendon Mayon                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
                                                            
 <td>
                      
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://r12.imgfast.net/users/1212/23/43/92/avatars/3-54.jpg); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       Mod                      
 </div>
                       Mitsu Hotaka                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                      
 </td>
                                                                                  
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://r12.imgfast.net/users/1212/23/43/92/avatars/4-50.png); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       Mod                      
 </div>
                       Cynthia Claves                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
 
 </tr>
                                      
 </tbody>
                                      
</table>
                            
<table>
                                            
 <tbody>
                                            
 <tr>
                                            
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://r12.imgfast.net/users/1212/23/43/92/avatars/16-17.jpg); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       Mod                      
 </div>
                       Kane Hayashi                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
                                                  
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://r12.imgfast.net/users/1212/23/43/92/avatars/15-99.jpg); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       Mod                      
 </div>
                       Kean Hayashi                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
                  
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://i59.tinypic.com/wvo6le.gif); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       Mod                      
 </div>
                       Eve Cross                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
          
 </tr>
                                      
 </tbody>
                                      
</table>
                            
<table>
                                            
 <tbody>
                                            
 <tr>
                                        
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://i.imgur.com/iGkpm50.png); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       NPC                      
 </div>
                       Sigal Porferio                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
                                            
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://i.imgur.com/3ltg5jj.png); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       NPC                      
 </div>
                       Takumi Yuuki                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
                    
 <td>
                                            
 <div style="width: 71px; height: 75px; padding: 2px; background-color: none; border: 0px solid #8f8e8c;">
                                            
 <div style="width: 71px; height: 75px; background-image: url(http://i.imgur.com/hnfi6oD.png); background-position: center; margin-top: 0px;">
                                            
 <div class="infohover">
                                            
 <div style="width: 67px; height: 71px; padding: 2px; background-color: #ffffff; position: relative; top: 0px; opacity: 0.9;">
                                            
 <div style="width: 63px; height: 67px; font-family: arial; color: #000000; font-size: 9px; text-transform: uppercase; font-weight: lighter; text-align: center;">
                                            
 <div style="width: 61px; height: 15px; background-color: #000; padding: 5px; margin-left: -2px; margin-top: 10px; font-family: georgia; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center;">
                       NPC                      
 </div>
                       Aiko Himura                      
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </div>
                                            
 </td>
                                                                    
 </tr>
                                            
 </tbody>
  
</table>
 

Versie: phpBB2
Browser: Google Crome
CSS aangepast: Ja
Templates aangepast: Ja

EDIT
Ah, ik ben er al uit. Ik heb een code van een andere forum van mij gebruikt en het werkt nu zoals ik het wil n.n Voor wie geïnteresseerd is, zo ziet het eruit:

Het plaatje bovenaan is wat misleidend, aangezien er who is online op staat, maar ik had gewoon even gauw een plaatje gepakt. Het is dus echt het index bericht :p

En dit is de code. Let op, dit is de kale code. Mijn plaatjes etc. staan er niet in.

Code:

<center>
       <br />      
 <table border="1" bordercolor="#F0FFF0" cellpadding="10" cellspacing="0" style="width: 800px;">
            
 <tbody>
            
 <tr>
            
 <td bgcolor="#F0FFF0">
      
 <!--         By Choco of the IFSZ         -->      
 <div class="tableborder">
            
 <div id="upperBoard" class="maintitle">
            
 <center>
            
 <table>
            
 <tbody>
            
 <tr>
            
 <td>
            
 <center>
BALK BOVENAAN
 </center>
            
 </td>
            
 </tr>
            
 </tbody>
            
 </table>
            
 </center>
            
 </div>
            
 <table cellspacing="1" cellpadding="4" style="width: 100%; height: 150px;">
            
 <tbody>
            
 <tr style="height: 20px;">
            
 <th class="titlemedium" style="width: 35%;">
TITEL LINKS
 </th>
            
 <th class="titlemedium" style="width: 30%;">
TITEL MIDDEN
 </th>
            
 <th class="titlemedium" style="width: 35%;">
TITEL RECHTS
 </th>
            
 </tr>
            
 <tr>
            
 <td class="row2" style="text-align:center;">
TEKST VAK 1 [LINKS]      
 </td>
            
 <td class="row4" style="text-align:center;">
TEKST VAK 2 [MIDDEN]
              
 </td>
            
 <td class="row2" style="text-align:center;">
TEKST VAK 3 [RECHTS]      
 </td>
            
 </tr>
            
 </tbody>
            
 </table>
                    
 </div>
      
 </td>
      
 </tr>
      
 </tbody>
      
 </table>
</center>

Ik had dit topic al eens gezien maar ik had het uitgesteld omdat ik niet op mijn computer zat, daarna was ik het even vergeten.

Ik ben wel blij om te zien dat je het ondertussen al zelf hebt kunnen oplossen.

..	Ondersteunings Vraag opgelost en gesloten.