如何将下图效果放到一个框内
如何将图中放到一个table内，且border="1"的效果，
等同table也可以（我试过直接加table不行，CSS我不会用），各位帮忙
上图对应的原代码
- HTML code
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script language="JavaScript" type="text/JavaScript"> <!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><title>无标题文档</title><body> <table border="0" cellspacing="0" cellpadding="0" width="430" height="40"><tr><td align=left>2012-2-1</td><td align=center></td><td align=right>2012-2-29</td></tr></table> <div id="0" style="position:absolute; width:200px; height:115px; z-index:1"> <table border="0" cellspacing="0" cellpadding="0" width="400" height="20"> <tr> <td bgcolor="3499D0" width="400" align=center height="30"></td> </tr> </table> </div> <div id="1" style="position:absolute; width:200px; height:115px; z-index:1"> <table border="0" cellspacing="0" cellpadding="0" width="400" height="20"> <tr> <td align=center width="213.333333333333" height="30"></td> <td bgcolor="#FF0000" align=center width="186.666666666667" height="30"></td> </tr> </table> </div> </body></html>[解决办法]
- HTML code
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>*{ margin:0; padding:0;}</style></head><body><div> <div style="height:35px; line-height:28px; width:90px; text-align:center;float:left;border:1px solid #b2bfe2;">2012-2-28</div> <div style="float:left;border:1px solid #b2bfe2; border-left:0; height:35px;"> <div style="border-bottom:1px solid #b2bfe2;"> <span style="margin-left:19px; margin-right:170px;">8:00</span> <span style="margin-right:170px;">13:00</span> <span style="margin-right:19px;">18:00</span> </div> <div style="margin-left:33px; margin-right:33px; background-color:#3CF;"> 1 </div> </div></div></body></html>
[解决办法]
- HTML code
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>*{ margin:0; padding:0;}</style></head><body><div style="margin:0 auto; width:620px; height:37px;"> <div style="height:35px; line-height:35px; width:90px; text-align:center;float:left;border:1px solid #b2bfe2;">2012-2-28</div> <div style="float:left;border:1px solid #b2bfe2; border-left:0; height:35px;"> <div style="border-bottom:1px solid #b2bfe2; height:16px;"> <span style="margin-left:19px; margin-right:170px;">8:00</span> <span style="margin-right:170px;">13:00</span> <span style="margin-right:19px;">18:00</span> </div> <div style="margin-left:33px; margin-right:33px; background-color:#3CF; height:18px; width:440px;"> 1 </div> </div></div></body></html>