html question about tables

[IHateExcite]

Here's the deal..... I've got a table with one row of cells. There's a mixture of cells with images and some with text. The problem is that even though I'm specifying the width and height property values in the table, img, and td tags the cells with text end about 5 pixels or so below the bottom of the images. I just want all the stinking cells to line up exactly so there's no visual distinction between which cells have text and which ones have images.

I'm not sure how clear that is, but I sure hope someone knows how to fix it!

[kanarde]

Ok, what you need to use is the cellspacing and cellpadding commands to get rid of the space. See example below:

<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">

BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rid of the borders altogether.

CELLSPACING (all one word) gives the amount of space between cells. I'd keep this kind of small. Large spacing tends to defeat the purpose.

CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings. Sometimes bigger is better.

Simply make the cellspacing and cellpadding equal to 0 and you should be set.

If you need more than that vist htmlgoodies

http://www.htmlgoodies.com/tutors/table.html
http://www.htmlgoodies.com

Hope it helps 8-)

[IHateExcite]

Well maybe I should have posted what I'm using so far for the tables. I dare say that I know as much about html as most since I've been designing websites semi professionally for just over 3 years. I don't mean to sound conseded or anything, it's just that if there was a solution that easy I'd like to think that I would have figured it out already. I almost always use a border of 0, with the occasional exception of a box frame. I also almost exclusively use 0 for both cellspacing and cellpadding.

I don't mean to sound like an ass. It's just that I'm a self reliant type of guy for the most part, only asking for help when the problem isn't readily solveable through my own means.

Any other advice?


Edited to say that the file in question is on an ntfs partition that I can't see right now since I'm on a 98se fat32 partition. The next time I reboot I'll boot into win2k and post the <table> source and a screenshot (relax.....it's only about 450 x 33 or so and probably will weigh in at under 10k) so you can see exactly what the problem is.

[Norm]

To avoid "sounding like an ass" I think a "thank you" is in order.

kanarde went out of his way to help you, typing almost a full page of help and links.
Even if it was of no help to you, "thanks, I appreciate the effort" is better than no thanks at all. Just a friendly reminder for future posts, I know you meant to say thanks.

Hi kanarde, and welcome to SG, it's good to see another new member helping out when they can.

Be seeing you around
Norm

[TonyT]

post your source code so we can see what is erred

[IHateExcite]

Here's the relevant portion, minus js and php and such. Please excuse any typos, since I had to retype most of this for the post so you wouldn't have to bounce back and forth between the style sheet and the html.

<table bgcolor=#C0C0C0 cellpadding=0 cellspacing=0 border=0 frame="void" height=33>
  <tr>
    <td nowrap bgcolor=#C0C0C0 height=33 width=50>
      <img src="images/1stTabA.gif" height=33 width=50>
    <td nowrap bgcolor=#848484 height=33>
      <font color=#000000>blah</font>
    <td nowrap bgcolor=#C0C0C0 height=33 width=31>
      <img src="images/TabA.gif" height=33 width=31>
    <td nowrap bgcolor=#000000 height=33>
      <font color=#C0C0C0>blah</font>
    <td nowrap bgcolor=#C0C0C0 height=33 width=31>
      <img src="images/TabC.gif" height=33 width=31>
    <td nowrap bgcolor=#000000 height=33>
      <font color=#C0C0C0>blah</font>
    <td nowrap bgcolor=#C0C0C0 height=33 width=31>
      <img src="images/TabC.gif" height=33 width=31>
    <td nowrap bgcolor=#000000 height=33>
      <font color=#C0C0C0>blah</font>
    <td nowrap bgcolor=#C0C0C0 height=33 width=31>
      <img src="images/TabC.gif" height=33 width=31>
    <td nowrap bgcolor=#000000 height=33>
      <font color=#C0C0C0>blah</font>
    <td nowrap bgcolor=#C0C0C0 height=33 width=11>
      <img src="images/LastTabB.gif" height=33 width=11>
</table>

What this is doing is displaying a horizontal tab-like iface for a site that funk and I are working on. The images will be dynamically generated to allow for custom colors and the like. It's a bit redundant to repeat the dimensions in both the td and img tags but I'm trying everything here. Besides, according to the w3 docs it's good practice to specify dimensions in the img tag. But I'm getting away from the problem. The table looks fine in the latest ns browser, but ie (imagine that eh) is displaying the images fine but the text cells are not vertically aligned with the bottom of the images. The bottoms of the text cells end several pixels below the intended bottom of the table, creating a somewhat jagged bottom edge for the table.

Has anyone else had problems with mixed image/text single row tables displaying correctly?

thanks in advance

-------------------------------------------------------------
Thanks for answering kanarde. I appreciate the effort anyways.

Norm, I am an ass and can't say that I intended to avoid sounding like an ass. Thank you for pointing out that omission. I suppose that in my own way, that entire reply could be condensed into something like "Thanks anyways, but.....". Another error that I see is that I spelled "conseded" wrong. I think it's spelled with a c instead of an s. Maybe not. Whatever.

I know that he went out of his way to help, but it's frustrating when you're finally fed up with an issue that you can't work out by yourself and ask for help (a good friend ken suggested that I try here) only to get a reply like that. What I mean is that I'm not an idiot. I googled for about an hour and a half looking for someone with a similar problem to mine. If I had absolutely no knowledge of html I'm perfectly capable of searching for html tuts. Several months ago I asked an asm question on a programming board only to get a reply with vb source with the guy talking down to me as if I was a 3yr old or something. That's when I say "look I'm not a newbie, thanks anyways" and try to bite my tongue. Sorry if that reply to kanarde offended anyone, but that's where I was coming from.


(edit: A friend on icq just told me that I forgot the closing tr and td tags. Just to avoid the same problem, those closing tags are completely optional (just like a </p>).)

[Norm]

I know you meant well, I was out of sorts last night.
Sorry about the rant.

I don't have an answer to your problem, I wish I did.
I do have a suggestion that sometimes works for me when I'm programming something, I use examples.

Find a web page that is already doing what you want to do, and have a look at the source code, it may give you an answer.
I find this method can be extremely helpful at times.
Hope this helps you in some way.

Norm

[Chris]

have you tried nesting the table inside of another table with fixed attributes?

[IHateExcite]

Actually I haven't tried nested tables but that just might do it. I'll try that when I boot back into 2k.

I'll be on the lookout for other sites that are doing something similar norm.

Thanks both of you for the assistance.

-crossing my fingers-

[Chris]

<table bgcolor=#C0C0C0 cellpadding=0 cellspacing=0 border=0 frame="void" width=100% height=33>
<tr>
<td

<table bgcolor=#C0C0C0 cellpadding=0 cellspacing=0 border=0 frame="void" height=33>
<tr>
<td nowrap bgcolor=#C0C0C0 height=33 width=50>
<img src="images/1stTabA.gif" height=33 width=50> </td>
<td nowrap bgcolor=#848484 height=33>
<font color=#000000>blah</font></td>
<td nowrap bgcolor=#C0C0C0 height=33 width=31>
<img src="images/TabA.gif" height=33 width=31></td>
<td nowrap bgcolor=#000000 height=33>
<font color=#C0C0C0>blah</font></td>
<td nowrap bgcolor=#C0C0C0 height=33 width=31>
<img src="images/TabC.gif" height=33 width=31></td>
<td nowrap bgcolor=#000000 height=33>
<font color=#C0C0C0>blah</font></td>
<td nowrap bgcolor=#C0C0C0 height=33 width=31>
<img src="images/TabC.gif" height=33 width=31></td>
<td nowrap bgcolor=#000000 height=33>
<font color=#C0C0C0>blah</font></td>
<td nowrap bgcolor=#C0C0C0 height=33 width=31>
<img src="images/TabC.gif" height=33 width=31></td>
<td nowrap bgcolor=#000000 height=33>
<font color=#C0C0C0>blah</font></td>
<td nowrap bgcolor=#C0C0C0 height=33 width=11>
<img src="images/LastTabB.gif" height=33 width=11></td>
</tr>
</table>
</tr>
</table>

Little rusty but something along these lines,
BTW, dont forget to close your tags

[IHateExcite]

Thanks mg. I got caught up in a couple of programming projects and had to put that on hold, but I promise I'll try that. I am almost positive that a nested table would work though.

As for the closing tr/td/th tags, those are completely optional. Trust me. Some html tags need to be closed, but some are purely cosmetic and have no real purpose. Since other people rarely read any of my source I always opt for typing as little as possible.

[Chris]

You have to remenber, IE is very forgiving of leaving tags open, other browser are not

[IHateExcite]

IE is very forgiving, but the world wide web consortium isn't.

If you check out the official html specs here you'll see:

11.2.6 Table cells: The TH and TD elements
.......
.......
Start tag: required, End tag: optional

and on the same page up a section (here ), you'll see:

The TR elements acts as a container for a row of table cells. The end tag may be omitted.

It really all just boils down to a sense of style that each person has when coding html. By all means, include the closing tags if you want. I'm a lazy typist though, and I'll continue to omit them.