Sign in to follow this  
Tiffany_Smith

[web] Simple HTML: trouble with tables

Recommended Posts

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 this post


Link to post
Share on other sites

<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 this post


Link to post
Share on other sites
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 this post


Link to post
Share on other sites
Quote:
Original post by Oluseyi
First 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 this post


Link to post
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 this post


Link to post
Share on other sites
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 this post


Link to post
Share on other sites
<!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..

Share this post


Link to post
Share on other sites

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

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this