Table problems

[prendo]

I am trying to build a website out of an interface design I produced in Photoshop. I've built the table in Dreamweaver and have added all my sliced images etc.

The problem I'm having is that the table cells won't align as I want them to. The gaps between each row are way too big. (They seem to be about 30 or 40 pixels but I want them to be exactly 10).

Here's the link to my HTML page:

LINK1


and here's the way the row spaces should look:

LINK2

Could anyone see what's going wrong with my table and tell me how I can tighten up the spaces between rows?

Any help greatly appreciated

[Admin]

get rid of all those empy cells and use cellspacing

[prendo]

..not sure I follow you admin. Are you saying that I need to split my 3 column table into rows?

Or do you mean the cells of my embedded tables that contain the outer lines and curved corner gif images? (I can't get rid of these unless you know another way to create round cornered boxes without using embedded tables - CSS not really an option)

s'OK...think I figured it out now!!

Cheers

[prendo]

I'd just like to add this annoying problem that I seem to come across sometimes. LINK

When I paste a block of text into my tables I sometimes get the tables extending horizontally. I know I should be able to set the absolute width of the table but when I do this the left hand verticle border line of the table dissappears completely.

I'm sure this must be something completely obvious but I just can't see it.

Any ideas whats wrong?

[Admin]

all the cells that contain   and nothing else can be removed.

use soemthing like this

<table cellpadding='0' cellspacing='5'>

and mess with the values of cellpadding & cellspacing untill you get it spaced out how you want.

[prendo]

Thanks admin. I tried filling in the blank cells with '&nbsp;' but this didn't help either, the table still collapses. I can't delete them entirely as they contain images as I mentioned above.

I'd upload a zip file to better illustrate my problem but I'm not sure whether I can do it on this forum??

[sde]

here's 2 methods of filling empty cells:

method 1.

PHP Code:

<table border=0 cellspacing=5 cellpadding=0>
<tr>
  <td>&nbsp;</td>
  <td>The last cell was empty</td>
</tr>
</table> 


the above method will work, but there is a limitation on how low the height parameter can be. the next method will solve that.

for the next one you must create a transparent gif 1 pixel by 1 pixel. lets call it "spacer.gif"

method 2.

PHP Code:

<table border=0 cellspacing=5 cellpadding=0>
<tr>
  <td><img src=spacer.gif width=1 height=1></td>
  <td>The last cell was empty</td>
</tr>
</table> 


hope this helps.

[Admin]

no no, im saying do not use empty cells.

get rid of them.

im sure you can get rid of 90% of those empty cells. they are what is screwing up your layout.

[prendo]

Admin, let me post some simplified code (see below) for one such table to make sure I understand you correctly. Maybe if you could highlight any particular cell that I could delete without effecting the overall design I would know what you mean. (as I feel I must be missing something blatently obvious here)

I've also uploaded all the files for this table in a zip file at this LINK to make it easier to illustrate.

Thanks (oh, and I have ampersand_nbsp; in each 'empty cell')

PHP Code:

<table width="370" border="0px" cellpadding="0px" cellspacing="0px" align="center">
  
<tr height="2px"> 
    <td background="../images/TL.gif">&nbsp;</td>
    <td background="../images/T_Fill.gif">&nbsp;</td>
    <td background="../images/TR.gif" width="5px">&nbsp;</td>
</tr>
  
<tr> 
    <td  background="../images/L_Fill.gif" width="2px">&nbsp;</td>
    <td height="102" valign="top" bgcolor="#FFFFFF" style="padding:3px;"> 
      <!-- START CONTENT -->
      <img src="../images/welcome1.gif" width="363" height="40" />
      <p>Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.</p></span> 
      <!-- FINISH CONTENT -->
    </td>
    <td  background="../images/R_Fill.gif" width="5px" valign="top"> 
      <!-- (Floating DIV tag inside right hand side cell column) -->
      <div valign="bottom"><img src="../images/det2.gif" /></div></td>
  </tr>
  
<tr height="5px"> 
    <td background="../images/BL.gif">&nbsp;</td>
    <td background="../images/B_Fill.gif"> 
      <!-- (Floating DIV tag inside bottom cell column) -->
      <div align="left"><img src="../images/det1.gif" /></div></td>
    <td background="../images/BR.gif" width="5px">&nbsp;</td>
  </tr>
</table> 


[sde]

what is R_fill.gif, and B_fill.gif, and BR.gif ?

you know you can make a 1x1 transparent gif and resize it to whatever you want? then use html formatting to color in the backgrounds.

[prendo]

I found numerous ways to create tables with rounded corners, as I discovered when I built this page.

They mostly involved creating 3x3 tables with gifs for each corner. I tried various different methods for creating the verticle and horizontal lines such as css, gifs and <td bg>. This was just the method I found to work best for me.

If you are saying this method is flawed, and is the main cause of my collapsed tables I will happily try it your way. Are you saying that if I use coloured transparent gifs inside the <td> tags instead of <td background..> then my tables will be structurally stronger??

[Admin]

you only need a 3x3 table to do what you are talking about.

[prendo]

Yeah sorry, I meant 3x3.

Oh yeah, I also realised why I can't use transparent gifs. R_Fill.gif and B_Fill.gif are used to create the 1 pixel black border + the shadow effect. So I would need to use normal gifs for these.