HTML简单布局 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>简单布局</title>
  6 </head>
  7 <body topmargin="0">
  8     <table border="0" cellpadding="1" cellspacing="1" width="800" height="800" align="center">
  9         <tr>
 10 
 11             <td width="260" valign="top" bgcolor="#f2f2f2">
 12                 <!-- bgcolor是table中设置table中设置背景色的语法
 13                 backgroundcolor:三种颜色表达方式; -->
 14 
 15                 <!-- 虽然很少使用, 但是html标签原生属性语句,依旧能够在某些时候解决一些问题. -->
 16 
 17 
 18 
 19                 <table border="0" width="200" align="center" cellpadding="0" cellspacing="0" >
 20                     <tr>
 21                         <td height="100"></td>
 22                     </tr>
 23                     <tr>
 24                         <td align="right"><img src="images/12.png"></td>
 25                         <td height="50"></td>
 26                     </tr>
 27                     <tr>
 28                         <td align="right">MM</td>
 29                         <td height="50"></td>
 30                     </tr>
 31                     <tr>
 32                         <td align="right">1234567890123</td>
 33                         <td height="50"></td>
 34                     </tr>
 35                     <tr>
 36                         <td align="right">123456@123.com</td>
 37                         <td height="50"></td>
 38                     </tr>
 39                 </table>
 40 
 41             </td>
 42             <td width="30"></td>
 43             <td width="480" valign="top" >
 44                 
 45                 <table width="480" border="0" cellpadding="0" cellspacing="0" >
 46                     <!-- align="right"  此处增加right会使后面hr划线无法成型-->
 47                     <tr>
 48                         <td height="30"></td>
 49                     </tr>
 50                     <tr >
 51                         <td align="right"><img src="images/title2.png" alt="title文件" ></td>
 52                     </tr>
 53 
 54 
 55                 </table>
 56                 <br>
 57                 <hr />
 58     
 59                 <table width="480" border="0" cellpadding="0" cellspacing="20" >
 60                     <tr>
 61                         <td colspan="4"><b>个人基本情况</b></td>
 62                     </tr>
 63                     <tr>
 64                         <td><b>姓名:</b></td>
 65                         <td>MM</td>
 66                         <td><b>籍贯:</b></td>
 67                         <td>上海</td>
 68                     </tr>
 69                     <tr>
 70                         <td><b>性别:</b></td>
 71                         <td>女</td>
 72                         <td><b>身高:</b></td>
 73                         <td>168</td>
 74                     </tr>
 75                     <tr>                        
 76                         <td><b>名族:</b></td>
 77                         <td>汉</td>
 78                         <td><b>体重:</b></td>
 79                         <td>58</td>
 80                     </tr>
 81                     <tr>
 82                         <td><b>生日:</b></td>
 83                         <td>199801</td>
 84                         <td><b>电话:</b></td>
 85                         <td>1234567890123</td>
 86                     </tr>
 87                     <tr>
 88                         <td><b>专业:</b></td>
 89                         <td>金融</td>
 90                         <td><b>现居地址:</b></td>
 91                         <td>浦东</td>
 92                     </tr>
 93                 </table>
 94                 <table width="480" border="0" cellpadding="0" cellspacing="20" >
 95                     <tr>
 96                         <td colspan="2"><b>教育背景及工作经历</b></td>
 97                     </tr>
 98                     <tr>
 99                         <td><b>2018-2019年:</b></td>
100                         <td>好好学习</td>
101                     </tr>
102                     <tr>
103                         <td><b>2017-2018年:</b></td>
104                         <td>天天向上</td>
105                     </tr>
106                 </table>             
107                 <table width="480" border="0" cellpadding="0" cellspacing="20" >
108                     <tr>
109                         <td colspan="2"><b>所获证书</b></td>
110                     </tr>
111                     <tr>
112                         <td><b>2018-2019年:</b></td>
113                         <td>三好学生</td>
114                     </tr>
115                 </table>
116 
117             </td>
118 
119             <td width="10"></td>
120 
121 
122         </tr>
123 
124 
125 
126 
127     </table>
128 </body>
129 </html>

 

posted @ 2019-08-13 15:10  Jrri  阅读(394)  评论(0)    收藏  举报