Forum Moderators: open
<body style="background:black;color:white">
<table align=center width=571>
<tr><td valign=top>
<img src="tab-top.jpg" width=571 height=400>
</td></tr>
<tr>
<td valign=top>
<table width=530 align=center>
<tr>
<td align=left>
<table cellspacing=0 cellpadding=0>
<tr>
<td colspan=2>
<font style=font-size:9pt color=white face=arial><b>Member Login</b></font>
</td>
</tr>
<tr>
<td>
<font style=font-size:8pt color=white face=arial>Username:</font></td><td><input type=text size=8 style="background:black;border:1px solid white;color:white;height:10pt;font-size:7pt;font-family:arial;position:relative;bottom:2px">
</td>
</tr>
<tr>
<td>
<font style=font-size:8pt color=white face=arial>Password:</font></td><td><input type=password size=8 style="background:black;border:1px solid white;color:white;height:10pt;font-size:7pt;font-family:arial;position:relative;bottom:2px">
</td>
</tr>
</table>
</td>
<td align=center>
hi dude
</td>
<td align=right>
hi
</td>
</tr>
</table>
Can I suggest that the first thing that you do is run your code through the W3C HTML Validator [validator.w3.org]...
That often highlights a lot of things that you can easily overlook by just scanning your code...
The ones on left and right about 300px wide
That alone sounds like 600px and yet your container table is set for 571px...
...the one in center all the rest it takes to fill up the width of the table
...so there is nothing left over for the center.
I'd suggest starting with the basic table structure, then fill in the width and other attributes, perhap with some "dummy" content", and then finally paste in the real content. You can temporarily add border=1 to the table if you can't figure out why things are going wonky for you.
As I read it, you want a structure like the one below. I think the critical piece of mark-up you are missing is the colspan="3" for the top row of your main table. You don't need to nest tables, as far as I can see.
<table>
<tr>
<td colspan="3">IMAGE</td></tr><tr>
<td>LEFT</td>
<td>CENTER</td>
<td>RIGHT</td></tr></table>
You can temporarily add border=1 to the table if you can't figure out why things are going wonky for you.
Good advise.
Your strategy sounds like a good application for perecentage widths such as left 25%, middle 50%, right 25%. As mentioned before, you're not going to get the full effect of a table without dummy content.
The ones on left and right about 300px wide, and the one in center all the rest it takes to fill up the width of the table, yet I am having trouble.
You defined your table as being 571 pixels wide, so if you want the left and right columns as 300 pixels each, you've got a problem! In your example, your left column nested table is marked as 530 pixels, leaving you 41 pixels for the other two.
I would fix the layout first, decide what you need, then add in the content to each section. Start with a really basic layout such as this:
<table cellpadding="0" cellspacing="0" border="1" width="571">
<tr><td colspan="3">Image here<td></tr>
<tr>
<td width="100">Left column</td>
<td width="371">Middle column</td>
<td width="100">Right column</td>
</tr>
</table>and then adjust the widths to suit. After that, feed in the content and change
border="1"border="0"beaten to it!
<body style="background:black;color:white">
<table align=center>
<tr>
<td valign=top colspan=3>
<img src="tab-top.jpg" width=571 height=400>
</td>
</tr>
<tr>
<td bgcolor=green>M</td>
<td bgcolor=lime valign=top align=center>
</td>
<td bgcolor=blue valign=top align=right>
</td>
</tr>
</table>
And you absolutely need to use borders and different colors while you get it whacked out....
