homepage Welcome to WebmasterWorld Guest from 54.167.10.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Simple HTML table question
ChilliLime




msg:3261386
 1:26 pm on Feb 23, 2007 (gmt 0)

I have a table with its width set to 100%, it has one row, three columns, I put an image in the middle column and set its width to 800 pixels to match the image.

I set column 1 and column 3 to have a background colour of blue, what I want to end up with is the image in the middle and the blue backgroun flowing out to either side.

When I view it the image is in the center but there is about a 5 millimetre gap on the left and right where the background colour should run to the end.

How can I fix it?

Thanks

 

Robin_reala




msg:3261393
 1:30 pm on Feb 23, 2007 (gmt 0)

Welcome to WebmasterWorld, Chillilime!

I'd suggest you don't use a table :) It's pretty easy to do using CSS and basic HTML, for example:

HTML:
<div class="picture"><img src="my_image.png" alt="My image" /></div>

CSS:
div.picture {
background-color: blue;
}

div.picture img {
display: block;
margin: 0 auto;
}

rsndll




msg:3261400
 1:41 pm on Feb 23, 2007 (gmt 0)

Have you ensured your td tags are against your content

e.g.

<td><img src="my_image.png" alt="My image" /></td>

and not

<td>

<img src="my_image.png" alt="My image" />

</td>

ChilliLime




msg:3261561
 3:51 pm on Feb 23, 2007 (gmt 0)

This is my code

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#03a5ff"><img src="images/spacer.gif" alt="" height="32" width="32" border="0" /></td>
<td width="832"><img src="images/AP-Diagnostics_07.gif" alt="" height="47" width="832" border="0" /></td>
<td bgcolor="#03a5ff"><img src="images/spacer.gif" alt="" height="32" width="32" border="0" /></td>
</tr>
</table>
</body>

Is it correct?

Thanks

Robin_reala




msg:3261712
 5:27 pm on Feb 23, 2007 (gmt 0)

I'd suggest instead changing to:

HTML:
<body>
<div class="picture"><img src="images/AP-Diagnostics_07.gif" alt="" height="47" width="832" /></div>
</body>

CSS:
div.picture { background-color: #03a5ff; }
div.picture img { display: block; margin: 0 auto; }

A <div> (or any block level element) automatically fills up the full width it can, and the image will sit on top of its background colour. The image is made display:block to get around gaps for descenders caused by line-height, and centred using margin: 0 auto.

ChilliLime




msg:3262592
 12:19 pm on Feb 24, 2007 (gmt 0)

Thanks for reply,

But can I do this using just a plain HTML table? I dont understand why the example doesn't work when the width is set to 100%

Thanks

inveni0




msg:3262633
 2:04 pm on Feb 24, 2007 (gmt 0)

The code you have works fine for me. What do the images look like? I notice that you have images in the left and right tables, also. Does the code display correctly in multiple browsers?

[edited by: tedster at 6:55 pm (utc) on Feb. 24, 2007]

inveni0




msg:3262873
 8:05 pm on Feb 24, 2007 (gmt 0)

Your issue is because of the page margins, not the table. By using CSS to adjust the body margins, you'll be all set!

rocknbil




msg:3262927
 9:55 pm on Feb 24, 2007 (gmt 0)

To wit,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Unique title here</title>
<style type="text/css">
body,html { margin:0; padding:0; }
.color-side-col { background-color: #03a5ff; }
#center-col { width:832; }
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="color-side-col"><img src="images/spacer.gif" alt="" height="32" width="32" border="0" /></td>
<td id="center-col"><img src="images/AP-Diagnostics_07.gif" alt="" height="47" width="832" border="0" /></td>
<td class="color-side-col"><img src="images/spacer.gif" alt="" height="32" width="32" border="0" /></td>
</tr>
</table>
</body>
</html>

PowerUp




msg:3264020
 11:20 am on Feb 26, 2007 (gmt 0)

rocknbil, when u put

body,html { margin:0; padding:0; }

does this apply to all tags in the html? like the <p>, <h1>, <table> or does it just apply to the <body> tag?

penstaar




msg:3264538
 6:55 pm on Feb 26, 2007 (gmt 0)

Try setting all your page margins to 0px. They are something like 4 or 5 px by default.

ie
<body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 marginheight=0 marginwidth=0>

hope that does it!

Robin_reala




msg:3264777
 10:28 pm on Feb 26, 2007 (gmt 0)

There’s no reason to use attributes to specify styling like that any more, unless you’re forced to support Netscape 3 or equivalent. The CSS mentioned earlier (html,body{margin:0;padding:0;}) does the same thing in a more standards compliant and forwards compatible way.

rocknbil




msg:3265096
 8:23 am on Feb 27, 2007 (gmt 0)

does this apply to all tags in the html? like the <p>, <h1>, <table> or does it just apply to the <body> tag?

Just body, to zero out all elements
* { margin:0; padding:0; }

PowerUp




msg:3265293
 1:12 pm on Feb 27, 2007 (gmt 0)

rocknbil, since you only zero-rized the margin & padding for the body tag, that means your <img> and <table> tags still have margins & padding? Maybe thats the white space

rocknbil




msg:3265822
 8:21 pm on Feb 27, 2007 (gmt 0)

No. With no whitespace between td and image elements and old-school cellpadding/cellspacing applied, you will have no margins or padding.


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="color-side-col"><img src="images/spacer.gif" alt="" height="32" width="32" border="0" /></td>
<td id="center-col"><img src="images/AP-Diagnostics_07.gif" alt="" height="47" width="832" border="0" /></td>
<td class="color-side-col"><img src="images/spacer.gif" alt="" height="32" width="32" border="0" /></td>
</tr>
</table>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved