|
HTML - Table Border Trouble
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> Similar TutorialsI'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>
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. 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? hello, i am getting the results in two columns after using the following code... import_request_variables('p','p_'); $connect=mysql_connect('localhost','gkkilaru','gkkilaru') or die('could not open:'. mysql_error()); mysql_select_db('gkkilaru_db'); $result=mysql_query("SELECT * FROM human WHERE $p_Searchtype='$p_Search'"); function returnResultsInColumns( $mysqlResult ) { $queryResults = NULL; if( mysql_num_rows($mysqlResult) > 0 ) { while($resultRow = mysql_fetch_array($mysqlResult)) { for ($intPos = 0; $intPos < mysql_num_fields($mysqlResult); $intPos++) { $fieldName = mysql_field_name($mysqlResult, $intPos); $currentArrayPos = ( isset( $queryResults[$fieldName] ) ? count( $queryResults[$fieldName] ) : 0); $queryResults[$fieldName][$currentArrayPos] = $resultRow[$fieldName]; } } $htmlTable = "<table>"; foreach( $queryResults as $field => $results ) { $htmlTable.= "<tr>"; $htmlTable.= "<td>" . $field . "</td><td>" . implode( ", ", $results ) . "</td>"; $htmlTable.= "</tr>"; } $htmlTable.= "</table>"; return $htmlTable; } else { return "The query returned no results."; } } // Pass the result of the MySQL query into the function. $tableLayout = returnResultsInColumns($result); echo $tableLayout; can anyone let me know the code for how to place a border or table for the result obtained? 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... 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! 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> 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 i have a table with a border of 0. i was wondering if it was possible to have only the very outlining border of the table be visible. I think I've totally given up on this, but thought I still pick all of your brains. I'm working with a CMS that has hardcoded tables so that even when you have border="0", a border still shows up on the live page. It's absolutely driving me nuts. Here's what I'm aiming at: I want to place 5 photos going down the right-hand side of the page. The only way I have figured out how to do this is through a table, but the border shows and makes the entire page look like crap. Any other ideas on how I can accomplish this? Thanks! Hi guys Attached is an image of the problem I'm having where in Firefox my table borders are not displaying correctly. I've coded using standard html as follows: Code: <table width=100% cellspacing="0" cellpadding="5" bgcolor="ffffff" border="1px" bordercolor="C0CFE2"> Any Ideas? The one on the left is the Firefox version. Hi, I'm trying to make a border with a 50x50px image repeated around it this is the code I have so far; <html> <head> <title>div test</title> <style type="text/css"> #outer { background-image: url(http://i890.photobucket.com/albums/a...oxBorder.jpg); background-repeat: repeat; background-color: #cccccc; width:100%; padding: 3em; } #inner { background-color:#ffffff; padding: 2em; } p {margin: 0px;} </style> </head> <body> <div id="outer"> <div id="inner"> <p> Blah blah blah </p> </div> </div> </body> </html> I want the image around the border to be showing the same as it does at the top, at the bottom. And i want the size of the table to be increased when new text is added into it each time. Can somebody please help me? Thankkksss. Hello, I'm having trouble with the bold line in the code below: Code: <html>
<head>
<title>H&R Properties</title>
<style type="text/css">
table.master
{
height: 100%;
}
td.banner
{
height: 100px;
text-align: center;
}
span.banner
{
font-size: 24pt;
}
td.news
{
width: 200px;
padding-top: 10px;
text-align: center;
}
iframe.news
{
width: 100%;
height: 100%;
}
td.menuandcontent
{
width: 530px;
}
table.menuandcontent
{
width: 100%;
height: 100%;
}
td.menu
{
height: 50px;
background: url('menu_bg.jpg');
text-align: center;
}
td.content
{
text-align: center;
}
iframe.content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="master" cellspacing=0 cellpadding=0 border=1>
<tr><td colspan=2 class="banner">
<span class="banner">
<img src="H&R banner.jpg" border=0></span></td></tr>
<tr>
<td class="news">
<iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
</td>
<td class="menuandcontent">
<table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>
<tr>
<td class="menu">
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><img src="home.jpg" border=0></td>
<td><img src="properties.jpg" border=0></td>
<td><img src="about.jpg" border=0></td>
<td><img src="contact.jpg" border=0></td>
</tr>
</table>
</td></tr>
<tr>
<td class="content">
<iframe class="content" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This code produced this: http://www.shahspace.com/border1/ But if I do something as simple as set border to 0 in the bolded line above, I get this: http://www.shahspace.com/border0/ The banner is all of a sudden shifted to the right by about 20 pixels. Why is this? Hey guys! I have created a table with images in it and for some reason the table doesn't exactly fit (in height) the images, it has like a little 5px border at the bottom and I can't figure out why. I have attached a picture showing the problem. In the image, the gray border is supposed to be there, and is part of the images and background image. But I want the table to end directly at the bottom of the gray bar, and for some reason it has a little lip at the bottom in which the background image begins to repeat again. My code is as follows: 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>
<title>QuickID | Setup Your Account</title>
<style type="text/css">
<!--
a:link { color: #777676; text-decoration: none; font: verdana}
a:visited { color: #777676; text-decoration: none; font: verdana}
a:hover { color: #3366CC; text-decoration: underline; font: verdana}
a:active { color: #777676; text-decoration: none; font: verdana}
-->
</style>
</head>
<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 background="images/bg.gif">
<table cellpadding=0 cellspacing=0 width=100% border=0 align=center background="images/top_bar_bg.jpg">
<tr>
<td>
<table width=980 cellpadding=0 cellspacing=0 align=center style="white-space: nowrap;" height=38>
<tr>
<td align=left>
<img src="images/top_bar_logo.jpg" border=0 height=38 ALT="logo">
<img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider">
</td>
<td align=left width=750>
hello!
</td>
<td align=right>
<img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider">
</td>
<td align=right>
<img src="images/top_bar_settings.jpg" border=0 height=38 ALT="settings">
</td>
<td align=right>
<img src="images/top_bar_logout.jpg" border=0 height=38 ALT="logout">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I have an issue. I really need to get rid of the borders in a html project i'm working on. I need to get ride of the borders to make a solid line from the left to the right. My screenshot is he http://terpconnect.umd.edu/~dwallac2/Screenshot.png <?php echo("<table border='0'"); for($i=0;$i<100;$i++){ echo("<tr border='0'>"); for($x=0;$x<100;$x++){ if($i%2){ echo("<td border='0'>"); } else{ echo("<td bgcolor='blue' border = '0'>"); } echo("hi"); echo("</td>"); } echo("</tr>"); } echo("</table>"); ?> i want the blue lines to be solid w/o the white dashes. I would appreciate anything you could do for me. Thanks Dave I have a problem on my forum, in the home page, the forum list is made up of a grid, but the spacing inbetween each spot is too big and therefore it looks kind of stupid. Any ideas? Heres the site http://techoftheweekpodcast.com/index.php Within the <table> tag, there is an attribute called frame. Can someone list for me the different values for the frame attribute. I know there is <table frame = rhs | lhs but I don't know what else there is other than rhs and lhs. Thanks |
|||||||