Jump to content

Formatting text in a table.


Dinaste48
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. :)
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...