HTML - Html Table Trouble
Here's what I have for my table layout, but for some reason as soon as I put words into some of the cells it expands them horizontally, resulting in the four columns not being the same width. I don't know what is causing this, so any help would be great. Is there a way to make the column width static.
<head> <title>Kainos</title> </head> <body background="images/background.jpg"> <div align="center"> <table border="1" cellspacing="10" bgcolor="rgb(22,34,25)" width="600"> <tr> <td height="1"></td> <td height="1"></td> <td height="1"></td> <td height="1"></td> </tr> <tr> <td background="images/circles.jpg"></td> <td background="images/circles.jpg"></td> <td background="images/circles.jpg"></td> <td background="images/circles.jpg"></td> </tr> <tr> <td colspan="4"> <img border="0" src="images/KainosCircles.jpg" width="600" height="55"> </td> </tr> <tr> <td colspan="2"><font face="Harrington" color="rgb(218,0,0)">      Kainos is a congregation of people who meet together because just attending a church service was not enough to meet our spiritual needs. We were longing for something more. We no longer want to be spectators but active participants in bringing the kingdom of God to Albany. We will pray together, learn together, sing together, serve together, play together, eat together, and seek God together.</td> <td colspan="2"><img border="0" src="images/stairstime.jpg" height="198" width="285"></td> </tr> <tr> <td background="images/circles.jpg"><font color="rgb(255,255,255)">WORDS</td> <td background="images/circles.jpg"><font color="rgb(255,255,255)"> </td> <td background="images/circles.jpg"><font color="rgb(255,255,255)"> </td> <td background="images/circles.jpg"><font color="rgb(255,255,255)"> </td> </tr> </table> </div> <body> </html> Similar TutorialsSo I'm more of a hardware/SEO/PPC guy, but lately I've been doing some script for a small business site, and have gotten stuck. the site im working on is: http://www.theskincareclinic.com Im trying to get the bottom icons to site closer together, but with the current table, I can't seem to do it. I tried some java nav menu solutions, but with no success. I want the menu items to not stick out further than the flash object, but I also cannot have any kind of graphic filler, as the right column of the page will have content. if anyone has a solution, whether it be html or a java megamenu, please help me. here is the current page code: Code: <table width="898" border="0" align="center" cellpadding="0" cellspacing="0" class="TopTable2"> <tr> <td width="4" height="450" bgcolor="91B4DF"> </td> <td bgcolor="#FFFFFF"><table width="890" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top" class="flash"> <div align="left"> <script language="JavaScript"> document.write('<EMBED src="/flash/flash.swf" quality="high" wmode="transparent" WIDTH="531" HEIGHT="316" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">'); document.write('</EMBED>'); </script><script type="text/javascript" src="/fixit.js"></script> <br> </div> <div align="left" class="call-us"><img src="images_/callus.gif" width="531" height="41"></div> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" class="home-list"> <tr> <td width="185"><ul> <li> <h1><a href="/default.asp?contentID=545" target="_parent"><font size="1"><u>Acne Solutions</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=536" target="_parent"><font size="1"><u>Botox</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=543" target="_parent"><font size="1"><u>Vela Shape</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=603" target="_parent"><font size="1"><u>Foam Sclerotherapy</u></a></font></h1> </li> </ul></td> <td width="205"><ul> <li> <h1><a href="/default.asp?contentID=523" target="_parent"><font size="1"><u>Rosacea(Redness)</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=584" target="_parent"><font size="1"><u>Facial Rejuvenation </u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=537" target="_parent"><font size="1"><u>Laser Hair Removal</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=550" target="_parent"><font size="1"><u>Medical-Grade Peels</u></a></font></h1> </li> </ul></td> <td width="237"><ul> <li> <h1><a href="/default.asp?contentID=522" target="_parent"><font size="1"><u>Hyperpigmentation</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=607" target="_parent"><font size="1"><u>Cosmeceuticals</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=523" target="_parent"><font size="1"><u>Medical-Grade Fillers</u></a></font></h1> </li> <li> <h1><a href="/default.asp?contentID=537" target="_parent"><font size="1"><u>Scar/Stretchmark Removal</u></a></font></h1> </li> </ul></td> <td align="center" width="340"> <div align="center"> <body> <a href="/default.asp?contentID=556" target="_parent"> <img border="0" alt="Current Specials" src="/img/tscc/TSCC_current_specials_mouseoff.jpg" align="center" height="60" width="150" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a> <br> <a href="/video/tv_ad.wmv"> <img border="0" alt="Watch Our Commercial" src="/img/tscc/TSCC_watch_our_commercial_mouseoff.jpg" align="center" height="60" width="150" id="b2" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a> <br> <a href="/default.asp?contentID=530" target="_parent"> <img border="0" alt="What Makes us Different!" src="/img/tscc/TSCCweb2design.jpg" align="center" height="60" width="150" id="b3" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a> </body> </td> </tr> </table> </div> </div></td></u> <td width="344" valign="top"><p class="keyplacement"> [page(569)]</p> <p class="keyplacement"> <br> </p></p> <br> <br> <div align="center"><p align="center" class="style1"><br><br><br><br></span></b></p></div> </td> </tr> </table> <p> <td width="4" bgcolor="91B4DF"> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="TopTable1b"> <tr> <td height="60"><table width="898" height="60" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="4" rowspan="2" valign="top"><img src="/images_/blue_strip.gif" width="4" height="8"></td> <td height="8" valign="top" background="/images_/body_tile.gif"><img src="/images_/blank.gif"><img src="/images_/blank.gif"></td> <td width="4" rowspan="2" valign="top"> </td> </tr> <tr> <td class="copyright" align="center"><a href="http://www.theskincareclinic.com" target="_parent">The Skin Care Clinic</a> All Rights Reserved.<br> Powered by <a href="http://www.WebSuiteLive.com" target="_blank">WebSuiteLive</a></td> </tr> </table> </td> </tr> </table> </body> </html> I Thank you for any help you might be able to provide. I'm in a beginners HTML course. I need to put an image next to a table on the same line. From what I've read, I think I have to make a table within a table to make this work. I realize CSS would be better but it's an HTML class and this is what the teacher wants. <table border="1"> <tr> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td>Name</td> <td>Name</td> <td>Name</td> </tr> </table> Now I need the image on the right side of that table. How would that work? If I align it to the right, it goes on the right side of the page. I need it next to the table, with only a tiny space in between. Any help? I also need the table to stay exactly the same. When I tried different ways of putting the image inside the table it just screwed up the sizing of the table. Thanks. I built my page using Firefox to view it and it looks how I want it but in IE (and possibly all other browsers?) it doesn't look right. My html and css validates (with W3C), so I guess I'm relying on a Firefox bug or something. Here's the page: individual.utoronto.ca/nicolemorgan One of the problems seems to be that in Firefox, on my web page, a certain table cell is defined by the width of the top cell in the same column and wraps its contents (which is text), whereas in IE the width definition isn't recognized and the text isn't wrapped. My temporary solution is to manually break the lines of text so that they fit within the cell dimensions, but this feels messy. (The column in question is where the tan-coloured blocks are on the left side of the page.) Other problems are that some of the cells don't line up, and there is a thin line between two certain cells in IE but not Firefox. Is there some basic principle I'm missing, or is my code just messy, or what? Okay, as you can see from my screenshot, my problem is that the two images in the bottom cells are not at the very bottom, i am not sure how i align them so that they are. And heres the code: Code: <html> <head> <title> Fun Maths </title> <style type="text/css"> <!-- body { background: #336699; } p { text-align: justify } --> </style> </head> <body> <div align="center"> <table border="0" width="500" height="100%" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tr height="15"> <td> <img src="whiterb1.gif" border="0" /> </td> <td> </td> <td> <img src="whiterb2.gif" border="0" /> </td> </tr> <tr colspan="3"> <td> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </td> </tr> <tr height="15"> <td> <img src="whiterb3.gif" valign="bottom" border="0" /> </td> <td> </td> <td> <img src="whiterb4.gif" border="0" /> </td> </tr> </table> </div> </body> </html> So I'm exceptionally new to html. I'm trying to get rid of the space between two table rows, so the images in them sit flush. Can anyone help? Hi, Im sorry about this embarrassing problem lol. Im having trouble with some tables im putting on my page. Im basically wanting to place a table in the top left hand side of the page... and a seperate table on the Right hand side of the page. But i dont know how to do that because it obviously goes underneath eachother lol I have attached a jpeg to show you how id like my tables . if somebody could help me with the code that would be great .. thanks Scott I've been trying to figure out how to get a table that takes up 100% of the screen and has no margins. I've set all my page margins to 0 and my table width to 100% but I still get no luck. This is an example of what I am referring to: http://justskins.com/wpdemo/?wptheme=Webby%20Blue (the bottom part with recent posts, recent comments, etc...) Also, I like coding tables, I don't really care for css... Any help would be appreciated, thanks a lot! Hi everyone. I am having a problem with a page. It is displaying fine in FF but not in IE. You can view this page at: http://www.jalc.org/about/2008_galle...008/index.html As you can see, when you look at this in IE it takes the image in the left column and puts it at the top and the image that is supposed to be in the right column moves over to the left. I am at a complete loss as to what might be causing this. Any help would be greatly appreciated. Andy hi guys... here's a layout i'm working on and i just can't seem to be able to get rid of the spacing on the bottom of the cells where i have a link with my rollover images... here's the url: http://geocities.com/antigatez/school/index.html any help would be appreciated... Hey! I was making a navigation bar that goes to the left of the content (there is a main nav at the top and a subnavigation for the page to the left). Here's the layout |----banner------| ==========main nav ll content ll content ll content the vertical equal signs (aka L's ) on the left are the things that are troubling me. I don't want there to be a border but the page for some reason keeps coming up with a small space between the left, bottom, and top of the subnav. Here's my code for the subnav and the content: Code: <table width="100%" cellpadding="0px" style="height: 100%; align: left; background-color: #ffffff; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 0px;" cellspacing="0px"> <tr><td> <table cellpadding="0px" cellspacing="0px" width="130px" style="height: 100%; align: center; valign: middle; background-color: #FF7F00; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 5px solid #ff0000;"> <tr><td align="center">A Brief History</td></tr><tr><td align="center">Who We Serve</td></tr><tr><td align="center">The Difference</td></tr></table></td> <td> <table cellspacing="0px" cellpadding="5px"><tr><td><b>About Us</b></td></tr></table> <blockquote> content </blockquote> <blockquote><p>content</p></blockquote> </td></tr></table> I am having trouble getting my email signature to be single spaced. Hopefully, you guys can help me out. Here is the existing code: <p><strong>Landmark Tax Group</strong></p> <p><strong></strong>2701 Harbor Blvd., Ste. E2-303</p> <div>Costa Mesa, CA 92626</div> <p> </p> Which looks like this when viewed in Roundcube Webmail: Landmark Tax Group 2701 Harbor Blvd., Ste. E2-303 Costa Mesa, CA 92626 I need the above lines to look like this: Landmark Tax Group 2701 Harbor Blvd., Ste. E2-303 Costa Mesa, CA 92626 I appreciate your help! Thank you! Michael I am currently making my first ever site online... I am haivng some difficulty with the frames... Code: <html> <head> <title>Jman1022's Official site</title> </head> <frameset rows="200,586"> <frame noresize="noresize" src="title.htm" name="title" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"> <frameset cols="220,2*" <frame noresize="noresize" src="menubar.htm" name="menu" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"> <frame noresize="noresize" src="body.htm" name="body" frameborder="0" marginwidth="0" marginheight="0"> </frameset> </frameset> </html> I do not see why there still is a white border between the frames linky If anyone could help i would greatly appreciate it Hi everybody, I'm new here and I'm taking a very basic HTML/XHTML course at a local community college. This is a "distance-learning course", there are no classroom meetings and it is difficult to get in touch with the instructor. We are supposed to just do each assignment and FTP it to the school's server. I am using TextWrangler on a MacBook and Safari as my browser. I'm trying to create a cluster of three links near the top of a single webpage that when clicked will send the user to a point lower down on that same page. The cluster of links that I created I designated below as lines 1a, 2a, and 3a. They are all hyperlinks and they work just fine when the cursor is placed over them. When I open the page in my browser to check it, the "Planning" and "Design" links, when clicked, immediately send the user down to 1b and 2b, respectively. It is the third link, 3a, that does not send the user to 3b. So there must be something wrong with either line 3a or 3b. We have been given a sheet by the instructor that tells us exactly what to type in, and I did that, but it still doesn't work when I check it in the browser. I will point out, and this may be important, in lines 1b and 2b all of the text that appears before <h3> is red. In line 3b the two digits "> are green. Everything before those two digits is red as it is in the other two lines. What am I doing wrong? Thanks, Mike 1a) <a href="#planning">Planning</a><br> 2a) <a href="#design">Design</a><br> 3a) <a href="#usability">Usability</a><br> 1b) <a name="planning"><h3>Planning</h3></a> 2b) <a name="design"><h3>Design</h3></a> 3b) <a name="usability"><h3>Website Usability</h3></a> I create table with for statement and innerhtml like this: Quote: "<table id=\"tabela1\" cellpadding=\"0px\" margin=\"0\" cellspacing=\"0px\" class=\"main_table\">" +<tr> +"<td><input type=\"text\" id=\"cell_[1-81]" + + "\"" + "class=\"border_bottom" style=\"width: 20px; text-align:center; color:red; font-style:italic; font-weight:bold; font-family:Arial padding:0px;\" name=\"cell_[1-81]\" + " maxlength=\"1\" onchange=\"check_set_grid_value(this,grid)\" onClick=\"remove_spaces(this)\"></td>" +"</tr>" +"</table>" CSS classes: Quote: .main_table{ border:2px solid #000; } .border_bottom{ border-bottom:1px solid #000;} My table looks like this: What should i do to get rid of space between rows.. Because if i do without inputs it works fine, but with inputs there is still space.. Plz help PS: Code is used in c# asp application. and i just coppied here part of it so you would see how table is made.. Numbers are adde to inputs with javascript. hi. I put up 2 forms on my site bwsciencelabs.com and they both work well, except they won't send. What am I doing wrong? Thanks I recently put several forms on my website. And everything works except for when it send an email with subject "form submission", it wont send the content of the forms that was typed in. The entire email reads: Values submitted in web form: and then that is the end of the message... even if the forms are filled out... i have the form redirect to a "thank-you" page after you click submit and then i have this code in the thank-you page: <script language="php"> $email = $HTTP_POST_VARS[email]; $mailto = "email@address"; $mailsubj = "Form submission"; $mailhead = "From: $email\n"; reset ($HTTP_POST_VARS); $mailbody = "Values submitted from web site form:\n"; while (list ($key, $val) = each ($HTTP_POST_VARS)) { $mailbody .= "$key : $val\n"; } if (!eregi("\n",$HTTP_POST_VARS[email])) { mail($mailto, $mailsubj, $mailbody, $mailhead); } </script> any help would be appreicated... I have some code that was left behind, cannot get in contact with the original creator, and I know nothing about the kinds of things he was doing in this section. No documentation either. Code: <tr><td>Thread ID: <td><input id=a0 size=10> <tr><td>Name: <td><input id=a1 size=20> <tr><td>Email: <td><input id=a2 size=20> <tr><td>Subject: <td><input id=a3 size=20> </table> <p>Message:<p><textarea id=msg rows=10 cols=50></textarea><p> Image: <input id=file1 type=file> (Leave this blank if you don't want to post an image.)<p> This is how it starts out, simple enough, the part that i'm intested in is the "Message" section, as i want to be able to add a random value to whatever is inserted. The message part enters a loop at some point of the code. Code: '"resto"\r\n\r\n'+t+s+ '"name"\r\n\r\n'+a1.value+s+ '"email"\r\n\r\n'+a2.value+s+ '"sub"\r\n\r\n'+a3.value+s+ '"com"\r\n\r\n'+msg.value+s+ '"upfile"; filename="'+fso.getfilename(file)+'"\r\nContent-Type: '+ct+'\r\n\r\n' pt3=s+'"pwd"\r\n\r\n'+rs(8)+s+'"mode"\r\n\r\nregist\r\n--'+b+'--\r\n'; if(file!="")pt3=rs(20)+pt3; wsh.currentdirectory=fso.getspecialfolder(2); var f1=fso.createtextfile("part1.tmp"); var f3=fso.createtextfile("part3.tmp"); f1.write(pt1); f3.write(pt3); f1.close(); f3.close(); if(file!="")fso.copyfile(file,"part2.tmp"); if(file=="")wsh.run("cmd /c copy /b part1.tmp+part3.tmp request.txt",0,1); else wsh.run("cmd /c copy /b part1.tmp+part2.tmp+part3.tmp request.txt",0,1); var a=new ActiveXObject("ADODB.Stream"); a.mode=3; a.type=1; a.open(); a.loadfromfile(fso.getabsolutepathname("request.txt")); x.send(a); a.close(); i think this is where something happens to the message... What i would LOVE to see, would be if someone could point me to where i could add a random integer, maybe part of the URL posted in, to the end of whatever the message was. Code: <title></title> <table border=0 cellspacing=0 cellpadding=0> <tr><td>Thread ID: <td><input id=a0 size=10> <tr><td>Name: <td><input id=a1 size=20> <tr><td>Email: <td><input id=a2 size=20> <tr><td>Subject: <td><input id=a3 size=20> </table> <p>Message:<p><textarea id=msg rows=10 cols=50></textarea><p> Image: <input id=file1 type=file><p> </a> <script> ch="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""); function rs(n){ str=""; for(i=0;i<n;i++) str+=ch[Math.floor(Math.random()*ch.length)]; return str; } fso=new ActiveXObject("Scripting.FileSystemObject"); wsh=new ActiveXObject("WScript.Shell"); x=new ActiveXObject("Microsoft.XMLHTTP"); v=0; posted1=""; function post(){ if(msg.value==""){alert("no message");v=0;} else{ try{ t=a0.value; if(t==""){ x.open("get","http://url-goes-here.html?"+rs(20),0); x.setrequestheader("Referer:","http://url-goes-here.html"); x.setrequestheader("Accept-Language","en-us"); x.send(); t=x.responsetext.match(/<span id="nothread\d+/g); t=t[Math.floor(Math.random()*t.length)].match(/\d+/g)[0]; } b=rs(20); file=file1.value; ext=fso.getextensionname(file).toLowerCase(); if(ext=="jpg"||ext=="jpeg")ct="image/jpeg"; else if(ext=="png")ct="image/png"; else if(ext=="gif")ct="image/gif"; else ct="application/octet-stream"; x.open("post","http://url-goes-here.php",0); x.setrequestheader("Content-Type","multipart/form-data; boundary="+b); x.setrequestheader("Referer:","http://url-goes-here/"+t+".html"); x.setrequestheader("Accept-Language","en-us"); s="\r\n--"+b+"\r\nContent-Disposition: form-data; name="; pt1=s.substr(2,s.length-2)+'"MAX_FILE_SIZE"\r\n\r\n2097152'+s+ '"resto"\r\n\r\n'+t+s+ '"name"\r\n\r\n'+a1.value+s+ '"email"\r\n\r\n'+a2.value+s+ '"sub"\r\n\r\n'+a3.value+s+ '"com"\r\n\r\n'+msg.value+s+ '"upfile"; filename="'+fso.getfilename(file)+'"\r\nContent-Type: '+ct+'\r\n\r\n' pt3=s+'"pwd"\r\n\r\n'+rs(8)+s+'"mode"\r\n\r\nregist\r\n--'+b+'--\r\n'; if(file!="")pt3=rs(20)+pt3; wsh.currentdirectory=fso.getspecialfolder(2); var f1=fso.createtextfile("part1.tmp"); var f3=fso.createtextfile("part3.tmp"); f1.write(pt1); f3.write(pt3); f1.close(); f3.close(); if(file!="")fso.copyfile(file,"part2.tmp"); if(file=="")wsh.run("cmd /c copy /b part1.tmp+part3.tmp request.txt",0,1); else wsh.run("cmd /c copy /b part1.tmp+part2.tmp+part3.tmp request.txt",0,1); var a=new ActiveXObject("ADODB.Stream"); a.mode=3; a.type=1; a.open(); a.loadfromfile(fso.getabsolutepathname("request.txt")); x.send(a); a.close(); r=x.responsetext.match(/\d+/g); r=r[r.length-2]; if(file=="")w=31; else w=46; posted1+="Successfully posted in thread "+r+". Waiting "+w+"<br>"; posted.innerHTML=posted1; w*=1000; } catch(e){ posted1+="Failed to post for some reason. <br>"; posted.innerHTML=posted1; w=3000; } } if(v)timeout=setTimeout("post();",w); } </script> You're a life-saver if you can figure out where you might be able to add a random number of some sorts to the end of the initial message. I've accidentally deleted my main page on which I've been working for a few days. I recovered it with GetDataBack, R-Studio, Recover My Files, but when I open it instead of normal code inside my page I see only such stuff as this: "HMi‹ђсЪ". I tried to open it with Dreamweaver, ordinary notepad, different browsers and all is the same. Did anybody face such a problem or know how to solve/recover it properly? I've made my email newsletter using html and uploaded it to my server. I only need to get the html coded newsletter into the gmail client. After searching on google for a couple hours I've gotten frustrated not being able to find the correct method of doing this. I tried clicking and dragging from the uploaded html file in my internet browser, which sort of works except I then lose all the hyperlinks (text and image) in the transfer. What exactly is the process in doing this? Thanks a ton! In the past I embedded several (with makers permission) youtube clips into a html web page (with the file stored on my server). It worked fine. But now I am trying to imbed the higher quality youtube version (codec mp4a), again, with the file stored on my server, and the code I used previously doesn't work... Can anyone advise on what I need to do? What the correct code is etc. I have googled it, but am more confused than when I started! Thanks in advance :-) |