What's wrong with this table format in IE?_问答_开发者

This is only happening in IE, when I place the table labelled -- middle table -- into this HTML, the alignment of the parent table gets messed up and the width="250" on the first TD gets ignored it seems. (The select box should start at 250 pixels from the left of the page, however it doesn't. Remove the table labelled -- middle table - and the alignment works as it should. Why is this happening?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>asdf</title>
</head>
<body>
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1">
 <tr style="height: 50px;">
  <td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td>
  <td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf:  </span><select class="form_select_"><option value="asdf">asdf</option></select></td>
 </tr>
 <tr id="row_container" align="left" valign="top">
  <td colspan="2">
<!-- middle table -->
   <table cellpadding="0" cellspacing="0" border="0">
    <tr>
     <td style="width: 250px;" align="left" va开发者_如何转开发lign="top" id="nav_container"></td>
     <td style="width: 25px;" align="left" valign="top"></td>
     <td id="dat_container" style="width:1000px;" align="left"></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr style="height: 50px;">
  <td></td>
  <td></td>
 </tr>
</table>
</body>
</html>

According to the W3C Validator, your XHTML contains six errors. More specifically, the width="250" attribute that gets ignored is not valid. The main problem with invalid tags is that you no longer get a coherent cross-browser rendering since browsers are forced to use workarounds. Try to fix this first. As a general rule, layouts should be accomplished via CSS.

You are taking an extremely archaic approach to web site layout. Using tables to lay out anything in a web site that is not tabular in nature is a MASSIVE no-no. You should be using standards-compliant CSS and HTML (DIVs, Spans, etc.) to lay your site out. Tables are treated differently by each browser, and it can be extremely difficult to get a consistent, functional, easy to maintain layout with them.

I hate to say it, but I really can't bring myself to help you resolve your current problem using tables. My only answer is restart, use DIV tags and CSS, and enjoy the bliss that is standards-compliant layout. (Do NOT use the style="" attribute to set all your CSS, use a proper stylesheet.)

1000 + 250 + 25 > 1250

your middle table is too wide

When all is said and done the short answer is...because IE can be very retarted. That said here is a work around:

First you issue simplified is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

Notice your 2nd td in your 1st row has no width specified. If you know what the width should be then you can work around this issue like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td width="750" style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

I do agree with what others have said, that css is the way to go, but that was not your question. Hopefully this helps.