Formatting text in a table.

[Dinaste48]

Hey guys, I'm a bit of a newby coming into web design. I'm familiar with most of it's basic functions and syntax, but unfortunately I have not mastered it, or the other web languages (css, java, javascript, flash etc). I have been studying up on the majority of CSS and HTML to get me by, and I'd like to incorporate flash/Javascript into my sites as I create them. Anyway, I'm rambling now. This is my first post so here goes:I'm having trouble with text alignment and padding in a table. I have a multi row/column table created, exactly 4 rows by 4 columns. The first row of columns are pictures, second row is a title for the picture, the next two rows follow that same pattern. Now I haven't 100% constructed this because of design procedures (pic sizing still needs to be done), but I have inserted some test pictures and text for this, to see what results I get. Now I have set the cellpadding="0px" yet my pictures both have awkward padding on what seems to be random sides. And my text is set to align="left" (NOTE:I've tried align="center" align="right" as well to see if the results vary) the text reads, "Pictures by FirstName LastName". Now the string "by FirstName LastName" aligns correctly with whatever I have set the alignment to, but the "Pictures" does not. In fact, it aligns to the right with whatever alignment I choose. I've checked the code to see if "Pictures" Is perhaps caught in some sort of <style> or other formatting tab, but it's not, it's in the proper field. Any ideas why this might be happening?

[dsonesuk]

undesirable padding at bottom of image may be because the img is on a new line instead of butting up against <td> tagyou have<table width="800" border="1" cellspacing="0" cellpadding="0"> <tr><td align="left"><img src="myimage1.gif" alt=" " /></td><td align="center"><img src="myimage2.gif" alt=" " /></td> </tr> </table>instead of<table width="800" border="1" cellspacing="0" cellpadding="0"> <tr><td align="right"><img src="myimage1.gif" alt=" " /></td><td align="center"><img src="myimage2.gif" alt=" " /></td> </tr> </table>this should not affect the alignment problem or padding on other edges of images.

[Dinaste48]

undesirable padding at bottom of image may be because the img is on a new line instead of butting up against <td> tagyou have<table width="800" border="1" cellspacing="0" cellpadding="0"> <tr><td align="left"><img src="myimage1.gif" alt=" " /></td><td align="center"><img src="myimage2.gif" alt=" " /></td> </tr> </table>instead of<table width="800" border="1" cellspacing="0" cellpadding="0"> <tr><td align="right"><img src="myimage1.gif" alt=" " /></td><td align="center"><img src="myimage2.gif" alt=" " /></td> </tr> </table>this should not affect the alignment problem or padding on other edges of images.

Your right I had my <img> tag down a line after <td>. I changed that, but the result remains. To be a bit clearer I have not set <td> size to anything in specific, but for some reason instead of adjusting to fit the inserted object (in this case, the image) it is expanding outward and to the right on both pictures. Both pictures have aligned themselves to the left. Why do I have this awkward spacing? Should I set <td> size parameters to ensure exact fitting? I'm going to do that, but perhaps that's not the case?

[dsonesuk]

set the width of table to the width of total width of all images in a row, or the td the width of image. hopefully they are all same width size? as you can't have different widths in the td cells in same column.

[ShadowMage]

Am I blind? I don't see any code or a link or anything, yet it seems dsonesuk found it somewhere.Anyway, try using a CSS reset. When margins and padding aren't explicitly defined, browsers will set them to default values (varying by browser) which can sometimes cause unwanted spaces.CSS reset:

* {   margin: 0px;   padding: 0px;}

[thescientist]

I think he just figured it out off the top if his head.

[ShadowMage]

I think he just figured it out off the top if his head.

Oooh, right. Yea, now after re-reading the post I think you're right.

[dsonesuk]

I used the force, or maybe just went by clues "table", "4 columns", "4 rows", what else do you need?anyway three posts and no-one yet said "ooooh tables bad!" "divs good!" slipping up here.

[ShadowMage]

anyway three posts and no-one yet said "ooooh tables bad!" "divs good!" slipping up here.

I think I would count this as an acceptable use of tables. It's just a gallery:

The first row of columns are pictures, second row is a title for the picture, the next two rows follow that same pattern.

[thescientist]

I'm always up to the task! Oooh... tables bad, div's good! I admit, an image gallery could go either way, though. But it would probably be easier just to float a bunch of images in a width defined container.

[dsonesuk]

I'm always up to the task! Oooh... tables bad, div's good!

Seriously! please don't open that can of worms, been done soooo many times :)

[thescientist]

joke?

[Dinaste48]

Ok so I have a confession. I have not used the div elements at all. I was under the impression web layouts were table oriented? Can the same affects be accomplished with divs? Spacing, borders etc? Like I said I'm new at this, so I've been trying to play it safe just creating tables and what not, but nonetheless I knew Galleries were able to be done with the table, so I went that direction. Could my problem with the annoying padding and strange alignment issue be countered using a div?

[ShadowMage]

Ok so I have a confession. I have not used the div elements at all. I was under the impression web layouts were table oriented? Can the same affects be accomplished with divs? Spacing, borders etc? Like I said I'm new at this, so I've been trying to play it safe just creating tables and what not, but nonetheless I knew Galleries were able to be done with the table, so I went that direction. Could my problem with the annoying padding and strange alignment issue be countered using a div?

Web layouts were table oriented. Lots of old sites use tables, but that's a bad way to do layouts. The very same effects and more can be accomplished with divs. It could very well fix your issues, if you do it correctly.

[Dinaste48]

So quick update. I found my alignment problem. I had an indentation for <p> elements set on an external SS. I just barely caught it, and I'm fixing it now. And I'm going to try synchronizing the widths of pictures and the table to see if that fixes the weird padding. I'm sure that's what the problem was. Thanks for the help guys, I'll give an update on here after I've made my changes.

[Dinaste48]

Web layouts were table oriented. Lots of old sites use tables, but that's a bad way to do layouts. The very same effects and more can be accomplished with divs. It could very well fix your issues, if you do it correctly.

I see. Hmmm... this is intriguing news. I may want to change my table layout and incorporate divs. Thanks for the info Loth.