Page 1 of 1

Building a table with flush images

Posted: Mon Jan 08, 2007 11:15 pm
by Shaneckel
This may sound obvious and simple, but if I cut up a site and use the table, the images are flush. If I type it out and manually build the site, nothing lines up.

How do you write a multi-celled table with images and have them all touch flush (as in with not a single pixel space).

Any insight will be helpful.

Posted: Tue Jan 09, 2007 12:23 am
by feyd
Often it's adding the proper sizing cells on the first row and as the first cell of each subsequent row.

Posted: Tue Jan 09, 2007 12:58 am
by Shaneckel
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


[syntax="html"]<html>
<head>
</head>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3" width="800" height="134">
			<img src="start_01.jpg" alt="">
		</td>
	</tr>
	<tr>
		<td width="168" height="24">
			<img src="start_02.gif" alt="">
		</td>
			<td rowspan="4">
			Main content
			</td>
		<td rowspan="4" width="26" height="586">
			<img src="start_04.gif" alt="">
		</td>
	</tr>
	<tr>
		<td width="168" height="228">
			<img src="start_05.gif" alt="">
		</td>
	</tr>
	<tr>
		<td width="168" height="18">
			<img src="start_06.jpg" alt="">
		</td>
	</tr>
	<tr>
		<td width="168" height="316">
			<img src="start_07.gif" alt="">
		</td>
	</tr>
</table>
</body>
</html>
Before I deleted the main image and added a content cell and everything mis-aligns. Is there a better way to tackle this task or should I just jump off one of the hundreds of bridges in pittsburgh with shiz by my side?


I was thinking (crazy huh?). If I label the cells with an id and then link an image to the cell using css, I might not get this problem.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Tue Jan 09, 2007 1:34 am
by feyd
Is there a reason you're specifying the widths and heights in the cells alone? Back in the day I used to specify the row height on the first cell alone and the widths in the first row. The images had their dimensions added always however.

Posted: Tue Jan 09, 2007 2:06 am
by Shaneckel
This might be easier to read

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Phi Kappa Psi</title>

<link rel="stylesheet" type="text/css" href="pkp.css">

</head>

<body>
<table id="maintd" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td id="m1" colspan="3" width="800" height="134">
		</td>
	</tr>
	<tr>
		<td id="m2" width="168" height="24">
		</td>
		<td style="background-color: #FFFFFF" rowspan="4" width="606" height="100%">
			main
		</td>
		<td id="m3" rowspan="4" width="26" height="100%">
		
		</td>
	</tr>
	<tr>
		<td id="m4" width="168" height="228">
			image4 css menu
		</td>
	</tr>
	<tr>
		<td id="m5" width="168" height="18">
		</td>
	</tr>
	<tr>
		<td id="m6" width="168" height="100%" >
		</td>
	</tr>
	<tr>
		<td id="m7" colspan="3" height="30" width="800">
		</td>
	</tr>
</table>
</body>

</html>


http://www.shaneckel.com/pkp

Figured out the problem. I was trying to use css to define the cell padding and cell spacing, when it needed to be done on the table itself (I think). This works if you were wondering.

If you have any cleaner or easier way of completing this, I'd be grateful.

Thanks a million.

Posted: Tue Jan 09, 2007 8:00 am
by feyd
Nope, that's unfortunately it. I've run into that problem myself. I wasn't even thinking about that possibility of culprit.

Posted: Tue Jan 09, 2007 9:57 am
by Kieran Huggins
As s side note: table-based layouts are the tool of the devil. Do yourself a favour and learn CSS - it will help you keep your sanity while you listen to your Alice Cooper records backwards.