Building a table with flush images

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Shaneckel
Forum Commoner
Posts: 48
Joined: Fri Sep 23, 2005 3:46 am
Location: Pittsburgh, PA

Building a table with flush images

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Often it's adding the proper sizing cells on the first row and as the first cell of each subsequent row.
Shaneckel
Forum Commoner
Posts: 48
Joined: Fri Sep 23, 2005 3:46 am
Location: Pittsburgh, PA

Post 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]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Shaneckel
Forum Commoner
Posts: 48
Joined: Fri Sep 23, 2005 3:46 am
Location: Pittsburgh, PA

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Nope, that's unfortunately it. I've run into that problem myself. I wasn't even thinking about that possibility of culprit.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
Post Reply