View Full Version : Tables

04-13-2005, 06:51 PM
Hi all,
Having some trouble with tables. Found some tutorials off this site searching the forums but couldn't find what I need. I'm using tables and gifs to control my sizes and things are going right.

I have cells with backgrounds to allow them to grow and repeat the background so they can grow with length but set cells I have above and below these will have large gaps in between them.

Great site and thanks in advance.

04-13-2005, 07:34 PM
Hi Drums and welcome to the forums!
Can you give a link to the page in question? It's hard to guess where the error in your code is or how to fix it without seeing it.

04-13-2005, 07:45 PM
Here's a link to a screenshot.

http://www.imagedump.com/index.cgi?pick=ge...l_id=0&warned=y ('http://www.imagedump.com/index.cgi?pick=get&tp=235556&poll_id=0&warned=y')

04-13-2005, 08:44 PM

Try using {margin-top: 0px;} in your style sheet. Assuming you are using styles. Apply the style to the td tag. If I'm wrong, then I too have learned something different.


04-13-2005, 08:51 PM
Hi, me again.

Is the top the with navigation the header? I'm assuming that one below is the body? Are they in different tables? If they are in different tables, can't you just put the cursor over the empty space between the navigation and below and hit delete? This should bring the table up flush. Again, asign a zero margin.


04-13-2005, 08:58 PM
Can you give us an actual link to the page so see we can see the actual code?


04-14-2005, 09:07 AM
Hya, if the user clicks the button 'code' they can insert it on the page if they wish, maybe they don't realise this.

Hya, if the user clicks the button 'code' they can insert it on the page if they wish, maybe they don't realise this.


04-14-2005, 02:34 PM
The Header with the navigation and the body are two seperate tables.
I'm not using styles.

Here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #595959;
<script language="JavaScript">
function mmLoadMenus() {
if (window.mm_menu_0413133929_0) return;
window.mm_menu_0413133929_0 = new Menu("root",180,14,"Verdana, Arial, Helvetica, sans-serif",10,"#F5FFFF","#03764F","#3DA965","#FFFDD4", "left","middle",2,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0413133929_0.addMenuItem("Overview","locat ion='/Inside.cfm?ID=1'");
mm_menu_0413133929_0.addMenuItem("Mission","locati on='/Inside.cfm?ID=2'");
mm_menu_0413133929_0.addMenuItem("ProgramsMatrix", "location='/Inside.cfm?ID=3'");
mm_menu_0413133929_0.addMenuItem("Staff","location ='/Inside.cfm?ID=6'");
mm_menu_0413133929_0.addMenuItem("BoardofDirectors ","location='/Inside.cfm?ID=7'");
mm_menu_0413133929_0.addMenuItem("Fellows","locati on='/Inside.cfm?ID=8'");
mm_menu_0413133929_0.addMenuItem("ContactInformati on","location='/Inside.cfm?ID=9'");
mm_menu_0413133929_0.addMenuItem("Directions","loc ation='/Inside.cfm?ID=10'");
window.mm_menu_0413140849_0 = new Menu("root",239,16,"Verdana, Arial, Helvetica, sans-serif",10,"#F5FFFF","#03764F","#3DA965","#FFFDD4", "left","middle",2,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0413140849_0.addMenuItem("Overview","locat ion='/Inside.cfm?ID=11'");
mm_menu_0413140849_0.addMenuItem("RefiningYourStra tegies-Math","location='/Inside.cfm?ID=12'");
mm_menu_0413140849_0.addMenuItem("ClientDistricts" ,"location='/Inside.cfm?ID=13'");
mm_menu_0413140849_0.addMenuItem("ParentalExpectat ions","location='/Inside.cfm?ID=15'");
mm_menu_0413140849_0.addMenuItem("GiftIdeas","loca tion='/Inside.cfm?ID=16'");
mm_menu_0413140849_0.addMenuItem("HigherEducationR ecommendations","location='/Inside.cfm?ID=17'");
mm_menu_0413140849_0.addMenuItem("InternetResource s","location='/Inside.cfm?ID=18'");
mm_menu_0413140849_0.addMenuItem("AchievementChart s","location='/Inside.cfm?ID=20'");

} // mmLoadMenus()
<script language="JavaScript" src="mm_menu.js"></script>

<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="800" height="379" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<td width="818" height="379" valign="top"><table width="800" height="112" border="0" align="center" cellpadding="0" cellspacing="0">
<td height="86" colspan="9"><img src="/images/images/Inside_01.jpg" width="800" height="86"></td>
<tr valign="top">
<td width="34" height="26"><img src="/images/images/Inside_02.jpg" width="34" height="26"></td>
<td width="122"><img src="/images/images/Inside_03.jpg" name="image1" width="122" height="26" border="0" usemap="#Map" id="image1"></td>
<td width="94"><img src="/images/images/Inside_04.jpg" name="image2" width="94" height="26" border="0" usemap="#Map2" id="image2"> </td>
<td width="113"><img src="/images/images/Inside_05.jpg" width="113" height="26"></td>
<td width="127"><img src="/images/images/Inside_06.jpg" width="127" height="26"></td>
<td width="78"><img src="/images/images/Inside_07.jpg" width="78" height="26"></td>
<td width="114"><img src="/images/images/Inside_08.jpg" width="114" height="26"></td>
<td width="82"><img src="/images/images/Inside_09.jpg" width="82" height="26"></td>
<td width="36"><img src="/images/images/Inside_10.jpg" width="36" height="26"></td>
</table><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<td colspan="3" valign="top" nowrap><img src="/images/images/images/Inside_11.jpg" width="260" height="150"></td>
<td width="502" rowspan="2" valign="top" bgcolor="#FFFFFF"><img src="/images/images/spacer.gif" width="502" height="1"><table cellspacing="0" cellpadding="0">
<td bgcolor="#CCCCCC"><p align="center" class="style1">Conceptual </p></td>
<td bgcolor="#CCCCCC"><h3 align="center">Development </h3></td>
<td bgcolor="#CCCCCC"><h3 align="center">Implementation </h3></td>
<td height="115" valign="top"><p align="center">Pathways to Curriculum Development for the New CT Science Frameworks II </p>
<p align="center"><strong>Grades K - 2 </strong></p></td>
<td valign="top"><p align="center">Pathways to Curriculum Development for the New CT Science Frameworks II</p>
<p align="center"><strong>Grades 3-5</strong></p> <h1></h1> </td>
<td valign="top"><p align="center">Pathways to the New CT Science Frameworks </p>
<p align="center"><strong>Teachers & Administrators </strong></p>
<p align="center"> </p> </td>
<td valign="top"><p align="center">Pathways to Curriculum Development for the New CT Science Frameworks II </p>
<p align="center"><strong>Grades 6 8 </strong></p></td>
<td valign="top"><p align="center">Promising Practices to Improve Mathematics Excellence </p>
<p align="center"><em></em><strong>PRIME </strong><em></em></p></td>
<td valign="top"><p align="center">Refining Your Strategies <strong>(RYS) </strong> Mathematics & Science <strong>Technical Assistance and Professional Development </strong></p></td>
<td valign="top"><p align="center">Connecticut PreK-12 <strong>Science </strong> Program Implementation Guide-2 nd Ed </p></td>
<td valign="top"><p align="center">Refining Your Strategies ( <strong>RYS) </strong>Mathematics & Science </p>
<p align="center"><strong>Evaluation Plan </strong></p></td>
<td valign="top"><p align="center">CT Academy Science Assessment Program </p>
<p align="center"><strong>CASAP </strong></p></td>
<td valign="top"><p align="center">Connecticut PreK-12 <strong>Mathematics </strong> Program Implementation Guide-2 nd Ed <em></em></p></td>
<td valign="top"><p align="center">CT Center for Science & Exploration </p>
<p align="center"><strong>Evaluation Model </strong></p></td>
<td valign="top"><p align="center">Partnership to Improve Science Education </p>
<p align="center"><strong>PISE </strong></p></td>
<td valign="top"><p align="center">Refining Your Strategies Science: </p>
<p align="center"><strong>CAPT </strong>Professional Development </p></td>
<td valign="top"><p align="center">CT Academy Science Assessment Program </p>
<p align="center"><strong>CASAP - 2005 </strong></p></td>
<td valign="top"><p align="center">CT Center for Inquiry Science <em></em>Higher Ed & K-12 Partnership </p>
<p align="center"><strong>Pilot Program I </strong></p></td>
<td valign="top"><p align="center">CONNECTicut Initiative </p>
<p align="center"><strong><em>Closing the Math Gap </em></strong></p>
<p align="center">Partnership </p></td>
<td valign="top"><p align="center">CT Statewide Math & Science Summit </p>
<p align="center"><strong>October 2005 </strong></p></td>
<td valign="top"><p align="center">CT Center for Inquiry Science <em></em>Higher Ed & K-12 Partnership <strong></strong></p>
<p align="center"><strong>Pilot Program II </strong></p></td>
<td valign="top"><p align="center"> </p></td>
<td valign="top"><p align="center">Pre K-3 Mathematics Blueprint </p>
<p align="center"> <strong>CSDE work </strong></p></td>
<td valign="top"><p align="center">CT Mathematics, Science and Technology </p>
<p align="center"><strong>Leadership Council </strong></p></td>
<td valign="top"><p align="center"> </p></td>
<td valign="top"><p align="center"><strong>Discovery Guide: </strong><em>Great Places for Families to Explore Science and Mathematics </em></p></td>
<td valign="top"><p align="center"><strong>Sheridan NASA </strong><strong>Explorer School </strong>NSTA-funded Project </p></td>
<td valign="top"><p align="center"> </p></td>
<td valign="top"><p align="center"> </p></td>
<td valign="top"><p align="center">CT- Building a Presence for Science <strong>Network </strong></p></td>
<td width="38" rowspan="2" valign="top" background="/images/images/Inside_15.jpg"><img src="/images/images/spacer.gif" width="38" height="1"></td>
<td width="34" height="165" valign="top" background="/images/images/Inside_17.jpg"><img src="/images/images/spacer.gif" width="34" height="1"></td>
<td width="209" valign="top" bgcolor="#DFFCEA"><img src="/images/spacer.gif" width="209" height="1"></td>
<td width="17" valign="top" background="/images/images/Inside_19.jpg"><img src="/images/images/spacer.gif" width="17" height="1"></td>
<td height="19" colspan="5" valign="top" nowrap><img src="/images/images/images/Inside_18.jpg" width="800" height="132"></td>
<map name="Map">
<area shape="rect" coords="4,3,117,21" href="#" onMouseOver="MM_showMenu(window.mm_menu_0413133929 _0,3,23,null,'image1')" onMouseOut="MM_startTimeout();">
<map name="Map2">
<area shape="rect" coords="3,5,91,21" href="#" onMouseOver="MM_showMenu(window.mm_menu_0413140849 _0,3,23,null,'image2')" onMouseOut="MM_startTimeout();">

Only reason I can't give a link is it's not live, it's just on our testing server and we can't give that ip out. Sorry.

I did some reslicing so now the only spaces are between the header/nav and body tables and there is also one space on the left hand side. The picture and green bar are now flush and theres just a space between the dark green bar and the light green box.

I tried putting the cursor between the tables and hitting delete but that did not work.
Thanks for all the responses so far!

04-14-2005, 02:47 PM
Ok, got clearance from the boss to give a link. ('')

The Id url parameter there is cause the content is dynamic from a database using coldfusion (which is what I'm good at, lol)

04-14-2005, 02:49 PM

Okay, your problem may be in the h3 tag! I'm not an expert (2 years of web design) by no means, but I had the same problem with the "heading tag" too! The heading tag is creating a gap! It happens. In order to bring my tags to the top I have to insert a style. .h1 {margin-top:0px;}. You can insert an in-line style or assign using external style.

Now, if someone with more experience has a different working solution, then I too learned something.

Let me know.

Ron :)

04-14-2005, 02:51 PM
By the way, you mentioned slicing?

Some may disagree, but my opinion on slicing is that there is a misconception in regards to saving download time. I have never sliced and all is good!


04-14-2005, 03:02 PM
Bartainer, I already have that tag in there. It's on line 7 if you view source. Is that what/where you meant?

04-14-2005, 03:46 PM
And if it helps to clarify, as has been said, the header and body are two tables and the solid green bar and light green box are cells in the same table.

*edit- Also, if you take away the "?ID=3" you can see what it looks with no content populating it

And my overall purpose is to have the light green box expand with the white box.

04-14-2005, 04:18 PM
Ok, instead of having the header and body as two tables I put them in one table and made the nav section a seperate table in that cell to put all the button slices (for rollovers) Now my only problem is makeing the light green box expand all the way.

there's three cells there, the two sides and the middle own which is just a cell with a colored background and the sides have slices as backgrounds, all with spacers to keep the width right.

04-14-2005, 07:20 PM
Ok got it right. I just re sliced some things, made the light green background and the border a background in the cell, put the people pic and solid green bar in the cell as a picture and aligned it to the top. Now all is well.

Thanks for all the help guys. :D

04-14-2005, 07:46 PM
Wheeeeeeeee fantastic!

Thanks for coming back to let us know DrumzCT

Well done, hope the boss gives you a raise..lmaoooo

:lol: :lol: