首页 > 代码库 > HTML——使用表格进行页面布局

HTML——使用表格进行页面布局

技术分享

<!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=utf-8" />
<title>表格布局</title>
</head>

<body bgcolor="white" leftmargin="0" topmargin="0">
	<!--外层表格開始-->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    	<tbody>
        	<tr>
            	<td align="center">
                <!--中层表格開始-->
                <table width="800" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
                <tbody>
                	<tr align="center">
                    <!--内层表格開始-->
                    <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                    	<tr>
                        	<td colspan="5"><img src="http://www.mamicode.com/20140224112909_Pt8jK.jpg" width="600" height="200"/></td>
                        </tr>
                        
                        <tr height="50">
                        	<td colspan="3">username:______ password:______</td>
                            <td colspan="2" align="right"><a href="http://www.baidu.com">帮助</a></td>
                        </tr>
                        
                        <tr height="2">
                        	<td colspan="5" background="黑线.png"</td>
                        </tr>
                        
                        <tr valign="top">
                        	<td width="140">
                            	<h3 align="center">你喜欢海吗</h3>
                                <ul>
                                	<li>写信告诉我今天</li>
                                    <li>海是什么颜色</li>
                                    <li>夜夜陪着你的海</li>
                                    <li>心情又如何</li>
                                    <li>灰色是不想说</li>
                                    <li>蓝色是忧郁</li>
                                    <li>而漂泊的你</li>
                                    <li>狂浪的心</li>
                                    <li>停在哪里</li>
                                </ul>
                            </td>
                            <td width="1" background="黑线.png"></td>
                            <td width="300">
                            	<h3 align="center">我爱的大海</h3>
                                <img src="http://www.mamicode.com/20120804021257_W3hWC.jpg" width="300" height="300"/>
                                <h3 align="center">你在哪呢</h3>
                                <ul>
                                	<li>写封信给我就当最后约定</li>
                                    <li>说你在离开我的时候是如何的心情</li>
                                </ul>
                            </td>
                            <td width="1" background="黑线.png"></td>
                            <td width="140">
                            	<h3 align="center">你会喜欢的</h3>
                                <ul>
                                	<li>写信告诉我你想要</li>
                                    <li>梦什么</li>
                                    <li>梦里外的我是否</li>
                                    <li>都让你无从选择</li>
                                    <li>我揪着一颗心</li>
                                    <li>整夜都闭不上眼睛</li>
                                    <li>为何你明明动了情</li>
                                    <li>却又不靠近</li>
                                </ul>
                           </td>
                      </tr>
                      
                      <tr>
                      	<td colspan="5"><img src="http://www.mamicode.com/20140224112909_Pt8jK.jpg" width="600" height="100" /></td>
                      </tr>
                      
                      <tr height="40">
                      	<td colspan="5" align="left">版权全部,翻录必究 &copy;1999-2014</td>
                      </tr>
                      
                  </tbody>
                 </table>
                 <!--内层表格结束-->
                 </td>
               </tr>
            </tbody> 
            </table>
            <!--中层表格结束-->
           </td>
           </tr>
         </tbody>
      </table> 
      <!--外层表格结束-->
      </body>      
</html>               
技术分享





HTML——使用表格进行页面布局