Table alignment issue html

Question

<table width="100%" border="0">
  <table width="600" align="center" bgcolor="#ffffff">
     <tr>
       <td width="600" colspan="120">Banner Image</td>
     </tr>
     <tr>
        <td width="400" colspan="80"></td>
        <td width="10" colspan="2" bgcolor="yellow"></td>
        <td width="190" colspan="38"></td>
     </tr>
  </table> 
</table>

The alignment is messed up for the 2nd row. How can it be resolved?

Answer 1

Looks like there are a lot of issues here.

First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:

<table width="100%" border="0">
    <tr><td>
    <table width="600" align="center" bgcolor="#ffffff">
        <tr>
            <td width="600" colspan="3">Banner Image</td>
        </tr>
        <tr>
            <td width="400"></td>
            <td width="10" bgcolor="yellow"></td>
            <td width="190"></td>
        </tr>
    </table>
</td></tr>
</table>

Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.

Note I removed the colspan because it's use here seemed very inappropriate.

Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.

Answer 2

Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.

Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.

See this example:

http://jsfiddle.net/xixionia/yt3gf/

Answer 3

You got a table inside a table directly and thats not "valid".

Considering:

I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190

You should have:

<table style="width:100%; background-color: #fff;">
 <tr>
   <td colspan="3">Banner Image</td>
 </tr>
 <tr>
    <td style="width: 66.6%"></td>
    <td style="width: 1.6%; background-color: yellow;"></td>
    <td style="width: 31.6%"></td>
 </tr>
</table>

You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.

This answer will probably fix your code but not the logic you are trying to apply.

Answer 4

The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.

<div>
    <table>
        <tbody>
            <tr>
                <td width="600" colspan="3">Banner Image</td>
            </tr>
            <tr>
                <td width="400"></td>
                <td width="10" bgcolor="yellow"></td>
                <td width="190"></td>           
            </tr>
        </tbody>
    </table>
</div>

I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.

Answer 5

You would try:

<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0"  border="1">     
<tr>        
<td colspan="120">Banner Image</td>     
 </tr>      
<tr>         
<td style="width:400px;" colspan="80">a</td>         
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>         
<td style="width:190px;" colspan="38">c</td>      </tr>   
</table> 
</table>

I add "border=1" and text in the cells in order to see the changes.