|
HTML - Bottom Table Trouble, Please Help!
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! Similar TutorialsHow 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'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> 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> 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 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! If I want to make a way to have that table move ends? 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> 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 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> ----------------------- Hey, I'm having a couple of problems which I'm hoping some of you may be able to help me with. Basically the background for the website which I am working on has 3 sections; a top section, a blankl middle section, and a bottom section. I have therefore designed the site using 3 tables, each table containing one row and 3 columns. Each table has one of the backgrounds, such that: A. The background of the top table is the top background. B. The background of the middle table is the blank, plain white background. C. The background of the bottom table is the bottom background. This method seems to work, however when I first implemented this design non of tyhe backgrounds displayed, so to get round this I entered some <br></br> tags which succesfully caused the backgrounds to display suitably. I continues the web design in FF, and completed it. When I then viewed the finished article in IE there were 2 top backgrounds, on middle section, and 2 bottom backgrounds. I fear I may be totally missing the point here! Can anyone help me out please. 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>
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 So 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 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? 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? 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. 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> |
|||||||