homepage Welcome to WebmasterWorld Guest from 54.211.34.105
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

5+ Year Member



 
Msg#: 3261384 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3261384 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3261384 posted 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

5+ Year Member



 
Msg#: 3261384 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3261384 posted 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