Table Layout...

L

liunx

Guest
Hello, I'm fairly new to HTML and I'm having quite a bit of problems with tables.<br />
<br />
<br />
On this test page, I'm trying to get the sideborders to line up against the top and bottom borders, and the text area to initially display the text from the top left corner of the cell instead of in the middle: <br />
<br />
<!-- m --><a class="postlink" href="http://plywood.bravepages.com/TESTING1234.html">http://plywood.bravepages.com/TESTING1234.html</a><!-- m --><br />
<br />
Any help provided would be much appreciated! =-)<br />
<br />
Here's the source:<br />
<br />
<html><br />
<head><nobanner> <title>Help</title></head><br />
<body><br />
<! --------------------------------------------- ><br />
<br />
<br />
<TABLE WIDTH="725" ALIGN="center" BORDER="0" bgcolor="#336699"><br />
<td width="725"><br />
<img src=http://www.htmlforums.com/archive/index.php/"http://members.lycos.co.uk/plywood2/Flash/topborder.gif" width="725" height="20"></td><br />
</table><br />
<br />
<! ------------------------------------------------ ><br />
<br />
<table align="center" border="0" cellpadding="0" cellspacing="0" height="550" width="733" bgcolor="#336699"><br />
<br />
<th width="0"><br />
<TD ALIGN="left" VALIGN="top" ><IMG SRC=http://www.htmlforums.com/archive/index.php/"http://members.lycos.co.uk/plywood2/Flash/sideborder.gif" WIDTH="20" HEIGHT="650" ALT="Home" BORDER="0"><br />
</TD></th><br />
<br />
<TH WIDTH="20" ALIGN="LEFT" VALIGN="top"><br />
</th><td ALIGN="TOP"><br />
<P> <font face='Arial,Geneva,Helvetica' size='3' COLOR='#FF0000'>hello, I wish this text could be displayed in starting at the top left corner on this cell.<br />
</font></P></TD><br />
<br />
<br />
<br />
<br />
<th width="20"><br />
<TD ALIGN="left" VALIGN="top" ><IMG SRC=http://www.htmlforums.com/archive/index.php/"http://members.lycos.co.uk/plywood2/Flash/sideborder.gif" WIDTH="20" HEIGHT="650" ALT="Home" BORDER="0"><br />
</TD></th><br />
<br />
<br />
</TABLE><br />
<br />
<! ----- New Table ----------------------- ><br />
<br />
<TABLE WIDTH="725" VALIGN="top" ALIGN="center" BORDER="0" bgcolor="#336699"><br />
<td width="725"><br />
<img src=http://www.htmlforums.com/archive/index.php/"http://members.lycos.co.uk/plywood2/Flash/bottomborder.gif" width="725" height="20"></td><br />
<br />
</table><br />
<br />
</body><br />
</html><!--content-->Add the following before the <html> tag:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<br />
Add this in between the <head></head> tags:<br />
<br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta http-equiv="content-language" content="en"><br />
<br />
Then go to: <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m --> and run it through their validation system. It will show you your errors, which will more than likely fix your problem.<br />
<br />
Gandalf<br />
:D<!--content-->There are several errors, including the fact that there are no <tr> or </tr> tags anywhere in your table. They do need to be inserted.<!--content-->Hi there PlyWooD,<br />
<br />
Bit of a knotty problem :D <br />
But try this...<html><br />
<head><br />
<br />
<style type="text/css"><br />
<!--<br />
table{border-collapse:collapse;padding:0;}<br />
td#one{width:725px;border-collapse:collapse;padding:0;}<br />
td#two{width:20px;;border-collapse:collapse;padding:0;}<br />
td#three{width:685px;border-collapse:collapse;padding:0;background-color:#336699;vertical-align:text-top;}<br />
//--><br />
</style><br />
<br />
</head><br />
<body><br />
<br />
<table ><tr><br />
<td id="one"><img src=http://www.htmlforums.com/archive/index.php/"topborder.gif" alt="" /></td><br />
</tr><tr><br />
<td id="one"><table><tr><br />
<td id="two"><img src=http://www.htmlforums.com/archive/index.php/"sideborder.gif" alt="" /></td><br />
<td id="three">text</td><br />
<td id="two"><img src=http://www.htmlforums.com/archive/index.php/"sideborder.gif" alt="" /></td><br />
</tr></table></td><br />
</tr><tr><br />
<td id="one"><img src=http://www.htmlforums.com/archive/index.php/"bottomborder.gif" alt="" /></td><br />
</tr></table><br />
<br />
</body><br />
</html>I notice that your sideborder.gif has an annoying white strip on the left hand side that needs to be rectified :mad:<br />
<br />
c:cool::cool:thead<!--content-->Hi there PlyWooD,<br />
<br />
I had a couple of spare minutes so...<br />
I got rid of that annoying white strip :D <br />
See attachment<br />
<br />
c:D:Dthead<!--content-->Thanks for your help! It's much appreciated! <br />
<br />
That code worked perfectly.(although, I do need to edit the sideborders, but thats another story):) <br />
<br />
<br />
Thanks!!!<!--content-->Just one small question....<br />
<br />
Shouldn't the "<table>" tag under the <td id="two"> be <br />
"</table>"<br />
<br />
It's not a big deal, they both work, I'm just curious. :P <br />
<br />
<body><br />
<br />
<table ><tr><br />
<td id="one"><img src=http://www.htmlforums.com/archive/index.php/"topborder.gif"></td><br />
</tr><tr><br />
<td id="one"><table><tr><br />
<td id="two"><img src=http://www.htmlforums.com/archive/index.php/"sideborder.gif"></td><br />
<td id="three">text</td><br />
<td id="two"><img src=http://www.htmlforums.com/archive/index.php/"sideborder.gif"></td><br />
</tr></table> </td><br />
</tr><tr><br />
<td id="one"><img src=http://www.htmlforums.com/archive/index.php/"bottomborder.gif"></td><br />
</tr></table><br />
<br />
</body><!--content-->Hi there PlyWooD,<br />
<br />
You are right :o <br />
Sorry about that shoddy work :o <br />
<br />
c:o:othead<!--content-->
 
You must log in or register to reply here.
Back
Top