|
HTML - Html Question. How Do I Extend A Table All The Way To The Bottom Of A Page?
I'm trying to design a simple html website for the company I work for but I have run into a problem. I can't figure out how to make the table extend all the way down to the bottom of the page without stretching the content.
I tried adding bottommargin="0px" to the body tag but that didn't work. I also tried adding height=100% to the table tag but that stretched the content of the page. Here's my code: <html> <head> <title></title> <link rel=stylesheet type="text/css" href=stylesheet.css> </head> <body topmargin="0px" bottommargin="0px"> <center> <table bgcolor="#FFFFFF" width=70% cellspacing=0 cellpadding=6 style="border: #000000 2px solid; border-bottom: 0px; border-top: 0px"> <tr><td> <center> <img src="logo.png"></a> </center> </td><td> <center> <b><big>Name</big></b> <br>Address <br>Address <br>Phone & Fax <br>License </center> </td><td> <center> <img src="logo.png"></a> </center> </td></tr> <tr><td colspan=3 style="border: #000000 2px solid; border-bottom: 0px; border-left: 0px; border-right: 0px"> <center> <img src="star.gif"> <a href=index.html>Home</a> <img src="star.gif"> <a href=testimonials.html>Testimonials</a> <img src="star.gif"> <a href=employment.html>Employment</a> <img src="star.gif"> <p><b><big>Welcome!</big></b></p> <p>Content</p> </center> </td></tr> </table> </center> </body> ----------------------- Similar TutorialsHello there, I am pretty new to web programming. I am currently having problem with Iframe's height. here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer. So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum. index.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body scroll="no"> <div id="apDiv1" scrolling="no"> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> </div> <div id="apDiv2" scrolling="no"> <iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe> <iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe> </div> </body> </html> 123.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> 1234567 </body> </html> abc.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </body> </html> Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website. Anyone know a solution to this? I'm looking for some help getting an html table I created to be at the top of a page. It looks alright to me, but then when I post it to my blog it has like 50 blank lines and puts it at the bottom of the page. I want it right at the top. I'm not the best at html, especially tables... I just try and copy excisting table examples and add my own information. If someone can help it would be greatly appreciated. Heres the code: HTML Code: <table cellspacing="1" cellpadding="2" border="1"> <tbody></tbody></table><table border="6"> <tbody><tr> <td><b><center>Player</center></b></td> <td><b><center>G</center></b></td> <td><b><center>PA</center></b></td> <td><b><center>AB</center></b></td> <td><b><center>R</center></b></td> <td><b><center>H</center></b></td> <td><b><center>HR</center></b></td> <td><b><center>RBI</center></b></td> <td><b><center>BB</center></b></td> <td><b><center>SO</center></b></td> <td><b><center>SB</center></b></td> <td><b><center>BA</center></b></td> <td><b><center>OBP</center></b></td> <td><b><center>SLG</center></b></td> <td><b><center>OPS</center></b></td><b> </b></tr> <tr> <td align="middle">Corey Hart</td> <td>60</td> <td>221</td> <td>194</td> <td>34</td> <td>61</td> <td>10</td> <td>31</td> <td>21</td> <td>35</td> <td>15</td> <td>.314</td> <td>.391</td> <td>.531</td> <td>.922</td> </tr> <tr> <td align="middle">Carlos Lee</td> <td>76</td> <td>331</td> <td>292</td> <td>41</td> <td>85</td> <td>13</td> <td>60</td> <td>24</td> <td>30</td> <td>4</td> <td>.291</td> <td>.341</td> <td>.503</td> <td>.844</td> </tr> <tr> <td align="middle">Corey Hart Projected</td> <td></td> <td></td> <td>294</td> <td>51</td> <td>91</td> <td>15</td> <td>46</td> <td>31</td> <td>52</td> <td>22</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> </tr></tbody></table> Hi, i have tables on my site at the top, middle, right,left etc... but I can't seem to get one to stick at the bottom of the page, it just stays underneath the other page info, i want it to go right to the bottom.... any ideas? thanks If I want to make a way to have that table move ends? I am stuck with this stupid code that i have been trying to fix for an hour! Please help. Heres my problem...: I want to embed a webpage within another and scroll it to the bottom of the page automaticly because i want the information at the bottom which is updated frequently. I also dont want a scroll bar, so all that is seen is the table. the website is www.totalfta.com. I want from below the ENTER|EXIT sign to the bottom of the table. I have attached what i have so far. ***I have the embed into another page, and the no scroll bar... i just want to make it auto scroll to the table..**** Thank you..! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tester</title> </head> <iframe height="410" width="100%" frameBorder="0" src="http://www.totalfta.com" mce_src="http://www.totalfta.com" scrolling="no" body onLoad="for (i=0;i<window.screen.availHeight;i++) {window.scroll(0,i); }"</iframe> <body> Hi there I got a little problem with my website http://www.gone-surfing.com ; the thing is that I would like to have the waveforecast on the right side of the site, where there is currently only an empty black space. And I am simply wondering how this can be done? In a way which enables the waveforecast to progress downwards out there, without pushing the other tables / content downwards. Hope some clever minds can help me out here. Any suggestions? PS! I would like to keep the design like this, it would be a bit too much work changing the whole design due to my lack of webdesign skills. The source code is available here @ gone-surfing.com/index.html A big thanks in advance for any help or suggestions. All the best, Alex Hey all, me and my friend have a cleaning company and we deciced to make a webpage. It's been a good 6 years since i have worked on a website. My biggest accomplishment so far was getting the contact form to work properly on the site. It does, i feel like i've done alot lol. Anyway, the current design is a rough layout (suggestions are welcome). It still needs a lot of little touches to make it look more "full". My biggest concern now is when your clicking from page to page the table jumps around. In firefox, the Contact Us and Services page are perfect, nice and centered. The image i'm using where the navigation buttons are is in place as well. When you go to the other pages though the table moves a bit and it looks like the image i'm using where the navigation buttons are starts to repeat. In Internet Exploder, everything doesn't look centered. There seems to be more space on the right than on the left, but the image i'm using for the navigation buttons seems to be fine, it's not repeating. I dunno what's causing this. I know different browsers display stuff in different ways but i'm far from having a good understanding as to why (that's why i'm here). I even copied txt from one of the messed up pages and pasted it on one of the pages that is ok and that didn't work. I assume it's a CSS thing. Also, try and avoid saying things like "Table designs are for teh n00bz!11!" or "This is why CSS is better than using a table design!!!". This is how i did it. Im ok with CSS but i don't have a thorough understanding of it to design an entire website using CSS. I'm hoping this is an easy CSS fix, or maybe something else? The website is www.gocleantoday.com. Thanks. Hi, Is there any possible to show a HTML or ASP page inside the table. I have tried with frames but i dont know how to execute exacltly. Thanks Can I put an HTML page within a html page in a table? I have this template that I need to email to people, it will not be on my website. Wow ever I need to change the information in one table every few days. The information is live I think it's called. It's like if I place google adsense in that table and decide to change it to ad-clicks later, I can't send everyone a new template, I need to be able to change just the information within that table. I'm going to go read up on frames, haven't used them in years. Any ideas! ~eDee Hi, How to center a html table in a page. I want the table should remain in center even the browser is re-sized. I want to code to work in all browsers.. how can I do this? thanks How do I make a table look like it's top and bottom go off the screen, like a solid bar down the middle of the screen. Instead of (with green being the table) it looks like . Thanks all. 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! I have a table with 2 rows. The table is 100% width and height. I want the bottom row to snap to the bottom. This row in particular has a background image and another table inserted in it (3 columns x 1 row) How can I do this? Please help!! Here is the code (I have tagged in blue colour the row I want snapped to the bottom): <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" class="leftrepeatimg"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="127" valign="top" background="images/left_top_bg10.jpg" class="imagerepeathorizontal"><div align="left"><img src="images/left_top.jpg" width="117" height="127" /></div></td> </tr> <tr> <td valign="top" bgcolor="#000000"><div align="left"><img src="images/left_middle2.jpg" width="117" height="492" /></div></td> </tr> </table> </td> <td width="790" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="180" valign="top" background="images/menu_bg3.jpg" class="norepeat"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="23" colspan="3"> </td> </tr> <tr> <td width="337" height="61"><div align="center"><span class="style2">menu goes here </span></div></td> <td width="114" height="61"><img src="images/logo3.jpg" width="114" height="61" /></td> <td width="339" height="61"><div align="center"><span class="style2">menu goes here </span></div></td> </tr> <tr> <td colspan="3"> </td> </tr> </table></td> </tr> </table> </td> <td valign="top" class="rightrepeatimg"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="127" valign="top" background="images/left_top_bg10.jpg"><div align="right"><img src="images/right_top.jpg" width="117" height="127" /></div></td> </tr> <tr> <td valign="top" bgcolor="#000000"><div align="right"><img src="images/right_middle2.jpg" width="117" height="492" /></div></td> </tr> </table></td> </tr> <tr> <td colspan="3" valign="top" background="images/bottom_gradient_blue.jpg" class="bottomfixed"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><div align="left"><img src="images/bottom_left.jpg" width="276" height="91" /></div></td> <td><div align="center"><img src="images/bottom_line.jpg" width="404" height="91" /></div></td> <td><div align="right"><img src="images/bottom_right.jpg" width="207" height="91" /></div></td> </tr> </table></td> </tr> </table> hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> On every other page, my table around my content works, but on the main page: http://www.snowwhitedesign.com there is a lot of white space below my image. My entire image is broken down into 3 x 3 images, 9 total in the grid. All images have different heights and widths I constructed the table by first creating the larger table with the blue border, and then created separate vertical tables within each vertical <td> since the images are of different heights. Also, how can I get rid of that small border line running right through the middle of my image? thanks! Im trying to creat a border above and beyond a word using inline css but want it go along the length of the whole width of the table. the table width is 500px. example I want this heading to have a bottom border go right across the width not just under it. <p><span style="font-size:12px;font-family:verdana;line-height:150%;border-bottom: 1px solid #EAEADA; font-weight:bold;color:#24561e;">HEADING1</span></p> I dont want to add a style sheet. The above code Shows up as HEADING http://wantedfraternity.webs.com/officerschat.html At the very bottom of my page I've got a gap...and I cant seem to see whats causing it. I had this problem before on another page, but I was able to fix it. This one I just cant seem to. Now the grey background is suppost to go all the way down, but its got a black spot stopping it now. Any help on what is causing it I'd be greatful. Thanks I am a novice when it comes to html and can't figure out why there is a gap at the top and bottom of my web page in Mozilla? In AOL browser it is ok. http://www.nomoreheartdiseaseandstrokes.com Thanks |
|||||||