There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
HTML Table Coding Help


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
LIGirl's Avatar
Member with 49 posts.
  
Join Date: Mar 2005
Experience: Intermediate
29-Jun-2008, 09:37 PM #1
HTML Table Coding Help
This may seem like a stupid question to you web design gurus, but as fairly skilled at HTML as I am, I cannot for the life of me figure this problem out, so I hope someone can take pity on me and help out.

I am working on a website that has its layout looking like this:

(Please pretend that the cells are drawn evenly. )

This is all currently in table format, but my problem lies within the cell that contains the "Main Content." (Anything in green, by the way, is a cell area that is empty and the color of the background.) What'd I'd like to do is have the height of that cell run ONLY as long as how much content is in that space (hope that makes sense). Right now, I have the main content cell spanning 7 rows, and I have to manually put in a height towards the bottom because if I don't, it will completely screw up the buttons (i.e, the buttons are made to look like they're attached, but if I don't manually put in a height for the main content, they become "disconnected"). Because of this issue, I have a ridiculous amount of empty space between the end of the "main content" and the bottom graphic.

Can anyone please tell me what I may be doing wrong? Is it a table within a table kind of situation? I'm not sure anymore.

Thanks so much for any help in advance!
Mudley's Avatar
Computer Specs
Member with 99 posts.
  
Join Date: Apr 2008
Experience: Advanced
30-Jun-2008, 12:33 AM #2
without seeing the code, hard to tell

you should do it in CSS
or at least a single table instead of nested
LIGirl's Avatar
Member with 49 posts.
  
Join Date: Mar 2005
Experience: Intermediate
30-Jun-2008, 12:48 AM #3
Thanks for your reply, Mudley. Unfortunately, I don't know CSS. I've always known and done my coding "long hand." I want to learn CSS, but I didn't have time to sit down and do it since I had to get this site put together rather quickly. I'm going to try to figure it out and switch this site over to it at some point, though.

As for single table vs. nested. I'm not sure what you mean, but it's in a single table right now.

Do you want to see the code, if you think that'll help?
Mudley's Avatar
Computer Specs
Member with 99 posts.
  
Join Date: Apr 2008
Experience: Advanced
30-Jun-2008, 12:53 AM #4
sure, show the code

i do all my layouts in tables too. i know css is a better alternative, but for me i'd have to spend a bunch of time learning it.
then every project would have additional troubleshooting - and thats frustrating.
i'm efficient with tables, and the benefits of using CSS really aren't as great as everyone says (they're there...but WHOOPEE)
LIGirl's Avatar
Member with 49 posts.
  
Join Date: Mar 2005
Experience: Intermediate
30-Jun-2008, 01:08 AM #5
Here is the code for the page that contains the most "main content." (I replaced all of it with "TEXT" just so no personal identifying information is shown.)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Official Website - About</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
A:link{color:#66A5B8; text-decoration:none; font-weight:bold}
A:visited{color:#66A5B8; text-decoration:none; font-weight:normal}
A:active{color:#FFFFFF; text-decoration:none; font-weight:normal}
A:hover{color:#9CAA9C;text-decoration:none; font-weight: normal}
</style>
</head>

<body bgcolor="#CEDFCE" onLoad="MM_preloadImages('about_rosm.gif','photos_ro.gif','music_ro.gif','v ideos_ro.gif','contact_ro.gif','home_ro.gif')">
<div align="center">
<table width="780" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="topmainfinal.gif"></td>
</tr>
<td width="88"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About_ro','','about.gif',1)"><img src="about_ro.gif" alt="About" name="About_ro" width="88" height="65" border="0"></a></td>
<td width="25"></td>
<td rowspan="7" width="627" valign="top"><center><img src="abouttitle.gif"></center><BR>
<font size="+0" face="Verdana, Arial, Helvetica, sans-serif">TEXT:<BR><BR>
<B><U>TEXT</B></U>:
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<BR>
<B><U>TEXT</U></B>:<BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<BR>
<B><U>TEXT</U></B>:<BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<BR>
<B><U>TEXT</U></B>:<BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<BR>
<B><U>TEXT</U></B>:<BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
<LI><I>TEXT</LI><BR>
</font></td>
<td width="40"></td>
</tr>
<tr>
<td><a href="photos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Photos','','photos_ro.gif',1)"><img src="photos.gif" alt="Photos" name="Photos" width="88" height="64" border="0"></a></td>
</tr>
<tr>
<td><a href="music.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Music','','music_ro.gif',1)"><img src="music.gif" alt="Music" name="Music" width="88" height="66" border="0"></a></td>
</tr>
<tr>
<td><a href="videos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Videos','','videos_ro.gif',1)"><img src="videos.gif" alt="Videos" name="Videos" width="88" height="64" border="0"></a></td>
</tr>
<tr>
<td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','contact_ro.gif',1)"><img src="contact.gif" alt="Contact" name="Contact" width="88" height="64" border="0"></a></td>
</tr>
<tr>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','home_ro.gif',1)"><img src="home.gif" alt="Home" name="Home" width="88" height="56" border="0"></a></td>
</tr>
<tr height="1850">
<td bgcolor="#CEDFCE"></td>
</tr>
<tr>
<td colspan="4"><CENTER><img src="bottomgraphic_sm.gif"></CENTER></td>
</tr>
</table>
</p>
<table width="780" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#CEDFCE">
<tr>
<td><center><font size="-4" face="Arial, Helvetica, sans-serif">Site best viewed in 1024x768 resolution.<BR>Copyright 2008<BR>TEXT<BR>All Rights Reserved</font></center>
</td>
</tr>
</table>
</CENTER>
</body>
</html>
Mudley's Avatar
Computer Specs
Member with 99 posts.
  
Join Date: Apr 2008
Experience: Advanced
30-Jun-2008, 01:21 AM #6
ok, i take back what i said.
nesting tables is your easiest solution.
outter table - 3 rows, 3 cols. first and last row has colspan=3 (header and footer)
middle row has three cells, each with the appropriate width
first cell contains another table for your nav buttons.
2nd cell is a spacer column
3rd cell is your main content

all three should have valign=top, everything should work perfectly

making this CSS looks really easy - but its not my bag, hopefully one of the other gurus will guide you in that direction
LIGirl's Avatar
Member with 49 posts.
  
Join Date: Mar 2005
Experience: Intermediate
30-Jun-2008, 01:23 AM #7
Thanks so much for the tips, Mudley. I will have to give this a go tomorrow as I have to be up for work in a few hours. So, I will definitely come back to let you know if I was able to work this out.
Mudley's Avatar
Computer Specs
Member with 99 posts.
  
Join Date: Apr 2008
Experience: Advanced
30-Jun-2008, 01:30 AM #8
yeah, i gotta be up for work in 5 hours too

g'nite
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,515 posts.
  
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
02-Jul-2008, 05:35 PM #9
How does these screenshots look to you? I did that with CSS and no tables.

I've got nothing against you using tables for your layout but I wanted to show you what a CSS layout version could look like.

The screenshots are taken in Maxthon 2.1.1 (IE 6 rendering engine) and Opera 9.5, both on Windows XP.

Peace...
Attached Thumbnails
html-table-coding-help-maxthon211.jpg  html-table-coding-help-opera95.jpg  
surender19797's Avatar
Junior Member with 4 posts.
  
Join Date: Jul 2008
Location: INDIA
03-Jul-2008, 03:51 AM #10
Hi Guys.

Too loooonggggggg. So Sorry !
Reply

« Previous Thread | Web Design & Development | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

Related Sites: Support.com | Tech Gift Ideas | Mobile TechGuy | Advertise on TSG
Contact Us - HelpOnThe.Net - Archive - Terms of Service - Top
You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 02:55 AM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.