[web] Simple HTML: trouble with tables

Recommended Posts

Tiffany_Smith    1300
I'm pretty new to this stuff so please bare with me... I have a basic web page that is centered (so the entire content is in a single table)... I simply want to align two images, my banner image (in blue) and another image (in red) like so: The images blend into each other so they have to be aligned that way, I cant figure out how to do this, would somebody please point me in the right direction?

Share on other sites
ProPuke    466
<table><tr>	<td rowspan=2>		left image	</td>	<td>		top image	</td></tr><tr>	<td>		content	</td></tr></table>

rowspan will make the topleft frame 2 rows high so it fills down into the one below. Hope this explains it

Share on other sites
Oluseyi    2103
First off, you really should be using CSS for layout purposes.
<table> <tr>  <td>red-image</td>  <td>    <tr>blue-image</tr>    <tr>page-content</tr>  </td> </tr></table>

The key here is rethinking the traditional notion of rows and colums and coming to grips with rows and cells. Apply the appropriate proportional or fixed row/cell sizing parameters to the <td> and <tr> tags.

[Edit: ProPuke's method is cleaner.]

Share on other sites
Tiffany_Smith    1300
Thank you so much guys, you're awesome!

Share on other sites
Pipo DeClown    804
Quote:
 Original post by OluseyiFirst off, you really should be using CSS for layout purposes.

Although I haven't seen anything disasterous yet, I do agree with this. This makes your code much cleaner.

Share on other sites
<div style="width:{red-image-width};float:left;">  <img src="{red-image-source}" alt="red image"/></div><div style="margin-left:{red-image-width}">  <div><img src="{blue-image-source}" alt="blue image"/></div>  <div>    <!-- content here -->  </div></div>

Stuff in curly braces is just placeholder of course. Haven't tested this but it should work. Remember appropriate doctype.

Share on other sites
Rob Loach    1504
Quote:
 Original post by igni ferroque *** Source Snippet Removed ***Stuff in curly braces is just placeholder of course. Haven't tested this but it should work. Remember appropriate doctype.

That's the good stuff. Also, make sure you validate it.

Share on other sites
Katta    560
<!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>Funky Chicken</title>				<style type="text/css">			.contain {				width:700px;				margin-right:auto;				margin-left:auto;				}			.subContain {				border:none;				float:left;				}			.headImg {				border:none;				width:500px;				height:200px;				background-color:#000000;				background-image:url();				}			.sideImg {				border:none;				width:200px;				height:500px;				float:left;				background-color:#555555;				background-image:url();				}			.content {				border:none;				width:500px;				text-align:justify;				background-color:#CCCCCC;				background-image:url();				}		</style>		</head>		<body>			<div class="contain">			<div class="sideImg">				 			</div>			<div class="subContain">				<div class="headImg">					 				</div>				<div class="content">					 				</div>			</div>		</div>		</body></html>

Validates, looks fine in both IE6 and Firefox 0.9.3, etc etc..

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account