Help with making a table

[isavarg]

I'm trying to make a table like this to go into the header section of my board.


But when I insert the code into the header, the 10px spaces between the cells disappear and run together, as you can see when you look at the board - legends-of-arda.boards.net/  Please ignore the colour scheme as I was just using it as a guide to see how far apart the cells are from each other as I doing the code. The code I used to create the table is this:


<table border="1" cellspacing="10" width="955">
<tr>
<td bgcolor="#00FF00">Character Spotlight</td>
<td bgcolor="#00FF00">Wanted Characters</td>
<td bgcolor="#00FF00">Active Storylines</td>
<td bgcolor="#00FF00">Links</td>
</tr>
<tr>
<td><table border="1" cellspacing="20">
<tr>
<td bgcolor="#00FF00"><a href="http://legends-of-arda.boards.net/thread/11/kili-icewolf"><img src="http://i.imgur.com/ho3uah2.png" border="0" alt="Kili"></a></td>
<td bgcolor="#00FF00"><a href="http://legends-of-arda.boards.net/thread/29/lyndheids-profile-icewolf-progress"><img src="http://i.imgur.com/7iBsWpR.jpg" border="0" alt="Lyndheid"></a></td>
<td bgcolor="#00FF00"><a href="http://legends-of-arda.boards.net/thread/27/lofnheid-icewolf"><img src="http://i.imgur.com/ZfGHT7a.jpg" border="0" alt="Lofnheid"></a></td>
</tr>
<tr>
<td bgcolor="#00FF00"><a href="http://legends-of-arda.boards.net/thread/28/loni-icewolf"><img src="http://i.imgur.com/Cch1RTA.png" border="0" alt="Loni"></a></td>
<td bgcolor="#00FF00"><a href="http://legends-of-arda.boards.net/thread/43/iolien-oaktwig"><img src="http://i.imgur.com/fJaX1mF.jpg" border="0" alt="Iolien Oaktwig "></a></td>
<td bgcolor="#00FF00">Empty</td>
</tr>
</table></td>
<td><table border="1" cellspacing="10">

<tr>
<td bgcolor="#00FF00"> Thorin Oakenshield</td>
<td bgcolor="#00FF00"> Fili</td>
</tr>
<tr>
<td bgcolor="#00FF00"> Dwalin</td>
<td bgcolor="#00FF00"> Balin</td>
</tr>
<tr>
<td bgcolor="#00FF00"> Radagast</td>
<td bgcolor="#00FF00"> Beorn</td>
</tr>
<tr>
<td bgcolor="#00FF00"> Bilbo Baggins</td>
<td bgcolor="#00FF00"> Frodo Baggins</td>
</tr>
<tr>
<td bgcolor="#00FF00"> Lord Elrond</td>
<td bgcolor="#00FF00"> Thranduil</td>
</tr>
<tr>
<td bgcolor="#00FF00"> Samwise Gamgee</td>
<td bgcolor="#00FF00"> Gandalf</td>
</tr>
<tr>
<td bgcolor="#00FF00"> Aragorn</td>
<td bgcolor="#00FF00"> Eowyn</td>
</tr>

</table></td>
<td><table border="1" cellspacing="10">

<tr>
<td bgcolor="#00FF00">After the Battle of the Five Armies </td>
</tr>
<tr>
<td bgcolor="#00FF00">Where the Wind Blows </td>
</tr>
<tr>
<td bgcolor="#00FF00">r </td>
</tr>
<tr>
<td bgcolor="#00FF00">r </td>
</tr>
<tr>
<td bgcolor="#00FF00">r </td>
</tr>
<tr>
<td bgcolor="#00FF00">r </td>
</tr>
<tr>
<td bgcolor="#00FF00">r </td>
</tr>

</table></td>
<td><table border="1" cellspacing="10">

<tr>
<td bgcolor="#00FF00">Welcome</td>
<td bgcolor="#00FF00">Site Credits </td>
</tr>
<tr>
<td bgcolor="#00FF00">Staff Required</td>
<td bgcolor="#00FF00">Help!</td>
</tr>
<tr>
<td bgcolor="#00FF00">Character Sheets</td>
<td bgcolor="#00FF00">Adoptable Characters</td>
</tr>
<tr>
<td bgcolor="#00FF00">Fan Fiction</td>
<td bgcolor="#00FF00">Link To</td>
</tr>
<tr>
<td bgcolor="#00FF00">Site Directory</td>
<td bgcolor="#00FF00">Affiliates</td>
</tr>

</table>

TUMBLR
LIVEJOURNAL

</td>
</tr>
</table>


I'd like the links to look something similar to the important links section of this layout - downtimecantina.boards.net/  (but without the change in colour when the cursor hovers over them.), but I'd mainly like to get the gaps between the cells to show up. Thanks.

[Tumbleweed]

I did a quick revamp of what you had inserting div's into the td tags as they are much more manageable with css.
You can see it here on my test site (Ignore all the other junk going on there): houseofglass.proboards.com/page/table

<table id="isavargs_table">
<tr>
<td style="width:23%;"><div id="tags_one">Character Spotlight</div></td>
<td><div id="tags_one">Wanted Characters</div></td>
<td><div id="tags_one">Active Storylines</div></td>
<td><div id="tags_one">Links</div></td>
</tr>
   <tr>
<td>
    <div id="inner_table_1">
    <table>
<tr>
<td><a href="http://legends-of-arda.boards.net/thread/11/kili-icewolf"><img src="http://i.imgur.com/ho3uah2.png" border="0" alt="Kili"></a></td>
<td><a href="http://legends-of-arda.boards.net/thread/29/lyndheids-profile-icewolf-progress"><img src="http://i.imgur.com/7iBsWpR.jpg" border="0" alt="Lyndheid"></a></td>
</tr>
<tr>
    <td><a href="http://legends-of-arda.boards.net/thread/27/lofnheid-icewolf"><img src="http://i.imgur.com/ZfGHT7a.jpg" border="0" alt="Lofnheid"></a></td>
                       <td><a href="http://legends-of-arda.boards.net/thread/28/loni-icewolf"><img src="http://i.imgur.com/Cch1RTA.png" border="0" alt="Loni"></a></td>
                   </tr>
<tr>
    <td><a href="http://legends-of-arda.boards.net/thread/43/iolien-oaktwig"><img src="http://i.imgur.com/fJaX1mF.jpg" border="0" alt="Iolien Oaktwig "></a></td>
<td ><img src="http://placehold.it/82x82"></td>
</tr>
</table>
    </div>
    </td>
<td>
      <div id="inner_table_2">      
        <table>
<tr>
            <td><div> Thorin Oakenshield</div></td>
            <td><div> Fili</div></td>
</tr>
<tr>
            <td><div> Dwalin</div></td>
          <td><div> Balin</div></td>
</tr>
<tr>
                           <td><div> Radagast</div></td>
            <td><div> Beorn</div></td>
</tr>
<tr>
            <td><div> Bilbo Baggins</div></td>
            <td><div> Frodo Baggins</div></td>
</tr>
<tr>
            <td><div> Lord Elrond</div></td>
<td><div> Thranduil</div></td>
</tr>
<tr>
<td><div> Samwise Gamgee</div></td>
<td><div> Gandalf</div></td>
                       </tr>
<tr>
<td><div> Aragorn</div></td>
<td><div> Eowyn</div></td>
</tr>
</table>
           </div>              
</td>
<td>
   
<div id="inner_table_3">    
    <table>
<tr>
            <td><div>After the Battle of the Five Armies</div> </td>
</tr><tr>
<td><div>Where the Wind Blows</div> </td>
</tr><tr>
<td><div>r</div> </td>
</tr><tr>
<td><div>r</div></td>
</tr><tr>
<td><div>r</div> </td>
</tr><tr>
<td><div>r</div> </td>
</tr><tr>
<td><div>r</div> </td>
</tr>
</table>
</div>    
</td>
<td>
   
<div id="inner_table_4">  
<table>
                   <tr>
            <td><div>Welcome</div></td>
<td><div>Site Credits</div> </td>
</tr><tr>
<td><div>Staff Required</div></td>
                    <td><div>Help!</div></td>
</tr><tr>
                    <td><div>Character Sheets</div></td>
<td><div>Adoptable Characters</div></td>
</tr><tr>
<td><div>Fan Fiction</div></td>
<td><div>Link To</div></td>
</tr><tr>
<td><div>Site Directory</div></td>
                    <td><div>Affiliates</div></td>
</tr>
</table>
        </div>
<div id="spec_name">
<center>TUMBLR LIVEJOURNAL</center>
</div>

</td>
</tr>
</table>

This is the css and you can either put it above your table with style tags around it or just put it at the bottom of your style sheet:



#isavargs_table{width:955px;padding:1px; border:1px solid black;margin:auto;
}
#isavargs_table td{vertical-align:top;}

#tags_one{
background-color:#777777;margin:4px;padding:4px;
border:1px solid black;color:#00ff00;
font-weight:bold;text-align:center;
}
#inner_table_1 {margin:auto;
}
#inner_table_1 img{border:1px solid #00ff00;margin:8px;
}
#inner_table_1,
#inner_table_2,
#inner_table_3,
#inner_table_4{margin:6px;padding:3px;border:1px solid black;
}
#inner_table_2 div,
#inner_table_3 div,
#inner_table_4 div{
background-color:#00ff00;margin:2px;
padding:5px;border:1px solid black;height:29px;
}  
#spec_name{ margin-top:10px;font-size:12px;color:#777777;font-weight:bold;}


In case you don't know what I mean about putting in style tags just paste the above css between this: (Only if you want to paste it above your table and not in the style sheet.)

<style>
The above css here
</style>

Let me know if something isn't exactly how you want it and we can easily fix whatever it is.

[isavarg]

That's how I wanted it. Thanks. I'll try it out!