为什么加了w3c后就完全变样子了?

<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function ini(){
document.getElementById("m2").style.display="none";
document.getElementById("m1").style.display="none";
}
function show(m){
var s=document.getElementById(m).style.display;
if(s=="block")
document.getElementById(m).style.display="none";
else
document.getElementById(m).style.display="block";
}
</script>
</head><body onLoad="ini()">
<table width="184" height="427" border="1" cellpadding="0" cellspacing="0" background="tu/作业二/images/background.jpg" style="background-repeat:no-repeat">
  <tr>  <td width="184" height="141"></td></tr>
  <tr>
    <td height="39" width="184"><img src="tu/作业二/images/help_3.jpg" onClick="show('m2')" /></td></tr>
  <tr>
    <td height="1">
<img src="tu/作业二/images/m2.jpg" id="m2">
</td>
  </tr>
  <tr>
    <td height="39"><img src="tu/作业二/images/help_2.JPG" onClick="show('m1')"/></td></tr>
  <tr>
    <td height="1"><img src="tu/作业二/images/m2.jpg" id="m1" /></td>
  </tr>
  <tr>
    <td ></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
</body>
</html>
以上代码结果出现后，如果去掉w3c标准，表格控制很有效，一旦加上，表格立马变得很难看，关键是无法固定住表格了，添加删除图片的时候表格上蹿下跳的。

解决方案 »

  1.   


    <!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"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>无标题文档 </title> 
    <script language="javascript"> 
    function ini(){ 
    document.getElementById("m2").style.display="none"; 
    document.getElementById("m1").style.display="none"; 
    } 
    function show(m){ 
    var s=document.getElementById(m).style.display; 
    if(s=="block") 
    document.getElementById(m).style.display="none"; 
    else 
    document.getElementById(m).style.display="block"; 
    document.getElementById(m).parentNode.style.height="auto";
    } 
    </script> 
    </head> <body onLoad="ini()"> 
    <table width="184" height="427" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-spacing:0;border-collapse:collapse;background:url(tu/作业二/images/background.jpg) no-repeat;"> 
      <tr style="height:141px">
       <td width="184">&nbsp;</td>
      </tr>
      <tr style="height:39px"> 
        <td width="184"><img src="tu/作业二/images/help_3.jpg" onClick="show('m2')" /></td>
      </tr> 
      <tr style="height:1px"> 
        <td><img src="tu/作业二/images/m2.jpg" id="m2"/></td>
      </tr> 
      <tr style="height:39px"> 
        <td><img src="tu/作业二/images/help_2.JPG" onClick="show('m1')"/></td>
      </tr> 
      <tr style="height:1px"> 
        <td><img src="tu/作业二/images/m2.jpg" id="m1" /></td> 
      </tr> 
      <tr style="height:103px">
        <td>&nbsp;</td> 
      </tr> 
      <tr style="height:103px">
        <td>&nbsp;</td> 
      </tr>
    </table>
    </body>
    </html>