Simple HTML table question

Forum Moderators: open

Message Too Old, No Replies

Simple HTML table question

ChilliLime

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

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

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

Have you ensured your td tags are against your content

e.g.

and not

<td>

</td>

ChilliLime

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

This is my code

Is it correct?

Thanks

Robin_reala

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

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

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

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

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

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

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

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

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

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

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>