HTML - Basic Table Driving Me Nuts!
I am trying to create a table that looks like the following:
_____________ |_______|____| |___________ | |___|________| Here is the code I am using: HTML Code: #mainTable { width: 100%; padding: 0; margin: 0; } #headerLeft { padding: 10px 0 10px 10px; width: 606px; } #headerRight { margin-top: 25px; text-align: right; white-space: nowrap; } .orangeBar { margin: 0; padding: 0; font-size: 8px; background-color: #FFC342; } #navCell { width: 225px; vertical-align: top; } #contentCell { width: auto; vertical-align: top; } <table id="mainTable" border="1"> <tr> <td id="headerLeft" colspan="2"><img src="images/logo.gif" width="596" height="60" alt="Our Logo" /></td> <td id="headerRight">Nav Links</td> </tr> <tr> <td colspan="3"><p class="orangeBar"> </p></td> </tr> <tr> <td id="navCell">Nav</td> <td colspan="2" id="contentCell"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a sem. Integer mattis justo eu nunc.</p> </td> </tr> </table> For some reason, the Nav cell in the last row is taking on the width of the image in the first cell, even though I want it to be 225px wide. I want the table to be the width of the page (100%). Anyone have any ideas? I know it can be done by nesting two tables, I was just trying to avoid that. Thanks! Just a quick edit, I added a bg color to headerLeft. Then I tested my code with the image removed, and the layout works they way I want, but as soon as I put it back, it is messed up again! The bg color I added confirms that the cell is the same size with and without the image. Similar TutorialsI am hoping someone with "fresh" eyes will be able to spot why I have a 1 pixel space pushing the bottom of my table down. It's a project I inherited, so it's not my code, but it should be obvious to me as to why it's not formatting correctly (but for the life of me, I cant see it). Anyone? Top part of code (if it's of any use): Code: <table border="0" cellpadding="0" cellspacing="0" bordercolor="0"> <tr> <td width="453" valign="top" background="images/homeBackground.jpg" class="BackNoRepeat"> </td> <td width="742" align="right" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="300" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"><img src="images/topLogo.jpg" width="300" height="128" /></td> </tr> <tr> <td align="left" valign="top"><img src="images/imgOpening.jpg" width="163" height="124" /></td> <td align="right" valign="top"><img src="images/rolloverMenu1.jpg" width="137" height="20" /><br /> <a href="recipes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/homeRecipesBTN_ov.jpg',1)"><img src="images/homeRecipesBTN.jpg" alt="Recipes" name="Image15" width="137" height="28" border="0" id="Image15" /></a><br /> <a href="nutrition.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/homeNutritionBTN_ov.jpg',1)"><img src="images/homeNutritionBTN.jpg" alt="Nutrition" name="Image16" width="137" height="25" border="0" id="Image16" /></a><br /> <a href="webstore.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/homeWebstore_ov.jpg',1)"><img src="images/homeWebstore.jpg" alt="Web Store" name="Image17" width="137" height="36" border="0" id="Image17" /></a><br /> <img src="images/home3.jpg" width="137" height="15" /></td> </tr> </table></td> <td width="442" background="images/mainBackground-right.jpg"><table width="441" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="441" align="left" valign="top"><img src="images/topRight.jpg" width="442" height="71" /></td> </tr> <tr> <td><table width="442" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="235"><script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','235','height','135','id','opening animation','align','','src','images/home','quality','high','bgcolor','#FFFFFF','name','opening animation','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/home' ); //end AC code </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="235" height="135" id="opening animation" align=""> <param name="movie" value="images/home.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <embed src="images/home.swf" quality="high" bgcolor="#FFFFFF" width="235" height="135" name="opening animation" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </object> </noscript></td> <td width="207" rowspan="2"><img src="images/main-top-right1.jpg" width="207" height="181" /></td> </tr> <tr> <td height="47"><img src="images/main-top-right2.jpg" width="235" height="46" /></td> </tr> </table></td> </tr> </table></td> </tr> this is where the space happens...and then the following code: Code: <tr> <td colspan="2"><img src="images/home5.jpg" width="742" height="69"></td> </tr> <tr> <td colspan="2" align="left" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="224" align="left" valign="top"><img src="images/home6.jpg" width="224" height="57" /></td> <td width="251"><form action="" method="post" > <table width="93%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="29%" align="right">Username:</td> <td width="34%"><input name="textfield" type="text" size="15" style="font-size:.75em"/></td> <td width="37%" rowspan="2"><input type="image" name="imageField" src="images/loginBTN.gif" /></td> </tr> <tr> <td align="right">Password:</td> <td><input name="textfield2" type="password" size="15" style="font-size:.75em"" /></td> </tr> </table> </form></td> <td width="267" align="right" valign="top"><img src="images/home7.jpg" width="267" height="57" /></td> </tr> </table></td> </tr> </table> <div id="greenLineBack"></div> <div id="footer">© Copyright 2007. All Rights Reserved.<img src="clear.gif" width="50" height="1"/><a href="#">RECIPES</a> | <a href="#">NUTRITION</a> | <a href="#">WEBSTORE </a></div></td> <td width="454" valign="top" background="images/mainBackground-right.jpg" class="BackNoRepeat2"> </td> </tr> </table> Hey good morning Im a photographer in st.louis . I normally do well with basic html im stuck now though. Im simply trying to get a Google Check out Button , Schedule Now Button , Facebook button and Twitter button all to appear on the same line on my web site. Right now they are stacked taking up way to much space. Any help would be appreciated. Here is a link to my web site so you know what Im talking about. simply scroll to just under the description of my Beginner Photography Course http://www.stlphotoart.com/Other/Beg...6793697_9F5rP3 Hi all, I have a problem that I think is simple but is making me go insane. I have a HTML email service that sends me email from my google blog without having top give my email address out. The problem is that it doesn't fit into my google blog. What I want to do is just to take the boxes and put the labels in myself, which is not a problem, but I need to know what part of the HTML makes the buttons work. Any help would be greatly appreciated, for my sanity more than anything else!: <form method="post" action="http://www.emailmeform.com/fid.php?formid=68804" enctype="multipart/form-data"> <INPUT TYPE=hidden NAME=FCode VALUE="5bb5hnjb"> <table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"> <tr> <td> <font face="Verdana" size="2" color="#000000"></font> <div style="" id="mainmsg"> </div> </td> </tr> </table> <br> <table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Name</font></td> <td> <input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td> </tr> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Email Address</font></td> <td> <input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td> </tr> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Subject</font></td> <td> <input type="text" name="FieldData2" value="" maxlength="100" size="20"><div style="position:absolute; top:343px; right:1582px;"><b>Tip: How to create web forms</b><br>Ever needed to create web forms for your website? We recommend Emailmeform, a service that helps you <a href="http://www.emailmeform.com">create web forms</a> easy in a few steps. No need to learn HTML or PHP!</div> </td> </tr> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Message</font></td> <td> <textarea name="FieldData3" cols="40" rows="15"></textarea><br> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td align="right"> <input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"> <input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"></td> </tr> <tr> <td colspan=2 align="center"> <br> </td> </tr> </table> </form> Iv been creating an ebay listing on Frontpage, the pictures iv added to the page have been from my pc, next I click on the CODE tab at the bottom, I copy all the code, then I go into turbo lister and click the HTML tab, I paste the code in, then I click on preview, the pics are not there, just a little red x in the corner. So Im thinking I should upload the Pics from my PC onto my server, (uk2) aswel as the whole file, in uk2 on the panel it shows EDIT HTML, it has all the pics there! then I click the CODE Tab and copy the code and pasted the code back into turbo lister, same thing, no pics again. Most of the time I figure these typs of things out before I get help, and this was is a real brain teaser! The filename is ebaylisting1, also it says the the file is a firefox Document Please Advise, thank you I've been up for the past 4 hours trying every way possible to get my table to align to the left of my page. I've tried countless html codes... anything and everything! Below is a list of my html codes as well as what my page is coming out like. Would someone please tell me how stupid I am and that I'm looking over something small or my html code is messed up. Sorry if I sound like Im whinning- I'm just frustrated. I really appreciate the help. Thanks. Quote: <LEFT> <TABLE BORDER=6 CELLSPACING=0 CELLPADDING=20> <TR> <TD>Info</TD> <TD>Info</TD> </TR> </TABLE> </LEFT> <table border="1" align="left"> <tr> <td>info</td><td>info</td> </tr> </table> Hello All, I've been having trouble with this table because I have interior cells adding to the confusion. I've included the current code, what you will see is three item images with their descriptions on the right side. You will also see a "view cart" button on the far right of the page. What I want is a simple 2 row 2 column set up for all four components. "Item 1" in the TOP LEFT cell. "Item 2" in the Bottom Left. The "view cart" feature in the TOP RIGHT cell. And finally "Item 3" in the BOTTOM RIGHT cell. I know I only need a few <td> or <tr> lined up in the right place but I've tried everything. THANK YOU IN ADVANCE!!!! <!--// Document Style //--> <style> .product-image { border:none; } .product-title, .product-price, .product-shipping { font-weight:bold; } .data-cell { padding:0px 50px 0px 10px;vertical-align:top} .align-cart { padding-left:280px; top:30pt;} </style> <!--// Document Table //--> <table class="data-cell"> <tr class="product"> <td><img src="images/stainless_thumbnail.gif" width="65" border="0" align="absmiddle" class="product-image"/></td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 1 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item2_image.jpg" width="65" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 2 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item3_image.gif" width="66" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 3 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> </table> <!--// Document Script "View Cart" //--> <script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=xyz" currency="USD" post-cart-to-sandbox="fale"> </script> Okay, it was all working great until I wanted to add another column to make the center logo clickable. Now I am having the problems with the little images being slightly out of alignment again. Any help would be greatly appreciated! The web address is: http://radarcartoons.com/test/test.html Here is the source code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Radar Cartoons </title> <style type="text/css"> * { margin: 0; border: 0; padding: 0; } body { background: #000000; text-align: center; } #wrapper { width: 1101px; margin: 0 auto; }</style> </head> <body><br /> <br /> <div id="wrapper"> <table cellspacing="0"> <tbody> <tr> <td><img src="1.jpg" alt="1" /></td> <td><br /> </td> <td><a href="/shows.html" onmouseover="document.circle1.src='2_lit.jpg'" onmouseout="document.circle1.src='2.jpg'"><img src="2.jpg" alt="Shows Page" name="circle1" height="161" width="145" /></a></td> <td><img src="3.jpg" alt="3" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="4.jpg" alt="4" /></td> <td><br /> </td> <td><a href="/news.html" onmouseover="document.circle2.src='5_lit.jpg'" onmouseout="document.circle2.src='5.jpg'"><img src="5.jpg" alt="News Page" name="circle2" height="151" width="140" /></a></td> <td><img src="6.jpg" alt="6" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="7_1.jpg" alt="7_1" /></td> <td><a href="/info.html"><img src="7_2.jpg" alt="7_2" /></a></td> <td><a href="/credits.html" onmouseover="document.circle3.src='8_lit.jpg'" onmouseout="document.circle3.src='8.jpg'"><img src="8.jpg" alt="Credits Page" name="circle3" height="148" width="148" /></a></td> <td><img src="9.jpg" alt="9" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="10.jpg" alt="10" /></td> <td><br /> </td> <td><a href="/links.html" onmouseover="document.circle4.src='11_lit.jpg'" onmouseout="document.circle4.src='11.jpg'"><img src="11.jpg" alt="Links Page" name="circle4" height="137" width="137" /></a></td> <td><img src="12.jpg" alt="12" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="13.jpg" alt="13" /></td> <td><br /> </td> <td><a href="/contact.html" onmouseover="document.circle5.src='14_lit.jpg'" onmouseout="document.circle5.src='14.jpg'"><img src="14.jpg" alt="Contact Page" name="circle5" height="133" width="126" /></a></td> <td><img src="15.jpg" alt="15" /></td></tr></tbody></table></div> </body> </html> hi, I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30"> <tbody> <tr> <td> <p><b><a class="button" href="l1.html" target="_blank">Link1</a></b></p> </td> <td> <p><b><a class="button" href="l2.html" target="_blank">Link2</a></b></p> </td> <td> <p><b><a class="button" href="l3.html" target="_blank">Link 3</a></b></p> </td> <td> <p><b><a class="button" href="l4.html" target="_blank">Link 4</a></b></p> </td> </tr> </tbody> </table> 1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks I know these are pretty easy questions, but I don't know that much about html and I couldn't seam to find the answer on w3 or anywhere else. NOTE: This it mainly for html, but if you have a solution in javascript or css, that would be fine. 1. How do you place a table (single celled) at a set distance from the left side and top of the page? 2. How do place a box (with a set color, thickness etc.) anywhere on the page (the same way as the table)? I know I could use the table thickness, but I like it set to "0" because I don't like its border look. Help please, thanks. Hi everyone, I am having a basic problem with a header for my site. The header template is a 3 column 4 row table, with various graphic pieces plugged into each cell. On the second row, I have a graphic that is as wide as the 2nd column plus the 3rd column, and I used the colspan command so it should take up both columns. But, there is a goofy gap to the left of it! Can anyone help? The website is www.precisionpythons.com Thank you! JonV Hello everybody, maybe someone can help me here - I have a little form on one of my websites where a user is supposed to type in one number in one little textbox. The textbox should be just big enough to contain only one number. While it is fine in Mozilla it seems to be messed up in Internet Explorer 6.0. Just two images - this is what it looks like in Mozilla: and this is what it looks like in IE: How in earth can I force it to show up in IE as it should, with a small box containing just one number? Here is the code: Code: <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD ALIGN="CENTER"><INPUT TYPE="text" NAME="m1" maxlength="1" SIZE="1" VALUE="1" STYLE="background-color:#E1CCB3" WIDTH="1"></TD> <TD ALIGN="CENTER"><INPUT TYPE="text" NAME="m2" maxlength="1" SIZE="1" VALUE="1" STYLE="background-color:#E1CCB3"></TD> </TR> </TABLE> </TD> <TD VALIGN="TOP"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD ALIGN="CENTER"><INPUT TYPE="text" NAME="d1" maxlength="1" SIZE="1" VALUE="2" STYLE="background-color:#E1CCB3"></TD> <TD ALIGN="CENTER"><INPUT TYPE="text" NAME="d2" maxlength="1" SIZE="1" VALUE="7" STYLE="background-color:#E1CCB3"></TD> </TR> </TABLE> </TD> <TD VALIGN="TOP"><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD> <INPUT TYPE="text" NAME="y1" maxlength="1" SIZE="1" VALUE="1" STYLE="background-color:#E1CCB3"><INPUT TYPE="text" NAME="y2" maxlength="1" SIZE="1" VALUE="9" STYLE="background-color:#E1CCB3"><INPUT TYPE="text" NAME="y3" maxlength="1" SIZE="1" VALUE="4" STYLE="background-color:#E1CCB3"><INPUT TYPE="text" NAME="y4" maxlength="1" SIZE="1" VALUE="2" STYLE="background-color:#E1CCB3"></TD> </TR> </TABLE> I added the maxlength out of sheer despair and now I am at all wits end. Does anyone have an idea how to fix this?? That would be so great.. Many thanks for reading and sorry if this is a bit bulky with the images. I also have a vague idea that this should probably be in css but then it's still html. I'm not good with css anyway.. Yatkha Hi, I have a cell within a table and into that I would like to place 4 x layers, all on top of each other. Adjacent to this I have 4 rows in a table, each with an image - the aim is to use OnMouseOver to hide / unhide the layers depending on which of the 4 smaller images are hovered over... The problem I have is that my website uses tables (width 950px) that are centred on the screen - and with resizing the screen in different browsers, the layers go out of alignment. Is there an easy way to ensure the layers always stay within the table cell? I'm using Dreamweaver MX2004. Thank you in advance for your very kind help. Matt Hey everyone, my website is pretty much viewing the same on my mac and on my pc now, except one big problem. Photoshop uses an automatic table generator which I used to layout my pop-up windows. I replaced one of the images into the background, and placed my text over it. This all works fine. My problem is that for some reason, IE is putting a 15px gap on my table in the worst places. http://www.myportfolio.ws/products/logo.html It works fine on my Firefox/Safari. Please help me ><;;; Also, why everytime I validate my html/xhtml I get a million errors when I know for a fact that its not ? My whole website is gaggle-full of errors that confuse me. Please help me out, I am entirely self-taught and this is just killing me. Heres the html code: Iam just leaning the stuff, so please be patient. when you goto the url theres a box all arond the website like its a pictue or somthing Heres the www:The BOX http://onestart.awardspace.biz HTML: CODE http://onestartcomputers.weebly.com/html.html Not sure this is the right way of posting but it works. So I'm redesigning a page for a friend, and we decided that iframes would be an awesome way to not have to update every page of the site when he wanted to change his menu or whatever. The design looks good now, but I'm having a problem trying to redirect the pages to only open in the frame. I've looked on google endlessly and can't seem to find what I'm looking for. The code that puts the iframe in my main frame page looks like this: <center><iframe name="iframe" width="100%" height="100%" *overflow-x:hidden;*></iframe> </center> The problem is that if someone finds a page on a search engine, they'll only see the page intended to be viewed in the frame. There's no way for them to get back to the home page, and the design of the page is basically absent. To deal with that, I found a piece of javascript that is supposed to make the page automatically open in its proper iframe, regardless of where it is linked from. That code looks like this: <SCRIPT LANGUAGE='JavaScript'> <!-- if (top == window) location.href = "home.htm" --> </SCRIPT> So, assuming you're still with me... when I use that piece of javascript, it redirects to the page with the iframe, but the iframe is blank. Originally I had the iframe set up to display the home page by default, but then when I used the js on other pages, it brought up the frame as well as an error message in the iframe. My question, then, is this: how the #(&$ do I set the iframe to display whatever page it is redirected from? It's driving me nuts, and I can't find info on this anywhere! Any help would be greatly appreciated! FYI, if it helps to see the pages and the errors I'm getting, the frames page is www.inthebackrow.com/home.htm. To see the orphaned pages, you can try www.inthebackrow.com/fun.htm, and the page I've been javascript-experimenting with is www.inthebackrow.com/driveins.htm. Thank you!! I have stared and stared and STARED at my code, but I cannot figure out where the stray equal sign (=) comes from on this page. It shows up centered on the page between the "Log out" and the "Team" Maybe another set of eyes can help. Thanks in advance. Jo http://www.bocachristian.org/preview/_pages/stray.php Hi, I apologize if I'm posting in the wrong forum. I've been trying to find out what I'm doing wrong for 5 days now with the contact form on the site I'm working on. So please help me out. i'm using the AJAX contact form from http://www.dustindiaz.com/ajax-contact-form/ I've used it on at least 5 other site and they work grate, however on the site I'm working now I had so many issues, first I could not align it up, then somehow I fixed that, now that everything looks good, when u fill in the info in the form and click "send email" the whole form jumps of the site to the right. I just dont know why? I cant see why ? I've been using this form on 5 other sites and the work Grate, except this site http://www.sadmir.com/DEMOS/ae2/contact.html Please look at it, try it, and help me out if you can .... Thank you my website www.palmettogoldandsilver.com looks fine on safari, and firefox.. but on internet explorer my links are not centered, and my background image for my body div tag is not showing up. Hello, I've been trying to eliminate an unwanted vertical scrollbar on the following website: http://www.sneezemag.com I want to keep the horizontal scrollbar. The codes I have inserted seem to work for IE but none work for safari. The page is framed and I have been searching for solutions but none seem to work. Most of the postings regarding unwanted scrollbars in safari are old now so was wondering if anyone can help me on this. Thank you, nic Hello everyone. I am having the worst time trying to figure this one out. I created a site for a hair salon and every time the page loads for the first time, it jumps from right to left. Does anyone know why it is doing this? There is an example link below. Thank you so much for taking the time to read this. http://www.erizzo.net/studiod/index.html |