• CSS写表格


    <!DOCTYPE HTML>
    <html>
    <head>	
    <meta http-equiv="Content_Type"
    content="text/html";charset=utf-8>
    		<title>个人信息登记</title>
    <style>
    	caption{height:50px;font-size:30px;font-weight:bold;}
    	
    	table{border:1px solid gray;
    	border-collapse:collapse;
    	margin:100px auto;}
    	
    	th{height:60px;130px;
    	border:1px solid gray;
    	background-color:#D6D3D6;}
     
    	.topleft{120px; background-color:#C6C7C6;}
     
    	td{height:60px;130px;
    	border:1px solid gray;
    	background-color:#C6C7C6;
    	text-align:center;}
     
    	.t1{120px; background-color:#BDBABD;}
     
     #out1{border-top:60px solid transparent;
          border-left:60px solid #BDBABD;
    	  height:0px;0px;
    	  position:relative;
    	  float:left;} 
    	  
    #out2{border-top:30px solid #D6D3D6;
          border-left:120px solid transparent;
    	  height:0px;0px;
    	  }
    	  
    	  #in1{position:absolute; 50px; top:-60px; left:10px;}
    	  #in2{position:absolute; 50px; top:-30px; left:-10px;}
    	  #in3{position:absolute; 50px; top:-20px; left:-60px;}
    	  
    	  body{background-color:#123456;}
    	  
    </style>
    </head>
    	<body>
    		<table>
    			<caption> 个人信息登记 </caption>
    			
    			<tr>
    			<th class="topleft">
    			<div id="out1">
    				<div id="in1">类别</div>
    				<div id="in2">内容</div>
    				<div id="in3">姓名</div>
    			</div>
    			<div id="out2"></div>
    			</th>
    			<th>年级</th>
    			<th>性别</th>
    			<th>专业</th>
    			<th>特长</th>
    			</tr>
    			<tr>
    			<td class="t1">
    				<input type="text" size="12" value="请输入你的名字">
    			</td>
    			
    			<td>
    			<select>
    			<option>2011</option>
    			<option>2012</option>
    			<option>2013</option>
    			</select>
    			</td>
    			
    			<td>
    			<input type="radio" name="sex">男
         		<input type="radio" name="sex">女
    			   </td>
    			<td>
    				<select>
    			<option>计科</option>
    			<option>信管</option>
    			<option>信技</option>
    			</select>
    			</td>
    			<td>
    			<textarea rows=2 cols=10>
    			</textarea>
    			</td>
    			</tr>
    			
    		<tr>
    			<td class="t1">
    			<input type="text" size="12" value="请输入你的名字">
    			</td>
    			
    			<td>
    			<select>
    			<option>2011</option>
    			<option>2012</option>
    			<option>2013</option>
    			</select>
    			</td>
    			
    			<td>
    				<input type="radio" name="sex">男
         		<input type="radio" name="sex">女		
    			   </td>
    			<td>
    				<select>
    			<option>计科</option>
    			<option>信管</option>
    			<option>信技</option>
    			</select>
    			</td>
    			<td>
    			<textarea rows=2 cols=10>
    			</textarea>
    			</td>
    			</tr>
    			
    			<tr>
    			<td class="t1">
    			<input type="text" size="12" value="请输入你的名字">
    			</td>
    			
    			<td>
    			<select>
    			<option>2011</option>
    			<option>2012</option>
    			<option>2013</option>
    			</select>
    			</td>
    			
    			<td>
    				<input type="radio" name="sex">男
         		<input type="radio" name="sex">女		
    			   </td>
    			<td>
    				<select>
    			<option>计科</option>
    			<option>信管</option>
    			<option>信技</option>
    			</select>
    			</td>
    			<td>
    			<textarea rows=2 cols=10>
    			</textarea>
    			</td>
    			</tr>
    			
    			<tr>
    			<td class="t1">
    			<input type="text" size="12" value="请输入你的名字">
    			</td>
    			
    			<td>
    			<select>
    			<option>2011</option>
    			<option>2012</option>
    			<option>2013</option>
    			</select>
    			</td>
    			
    			<td>
    			<input type="radio" name="sex">男
         		<input type="radio" name="sex">女			
    			   </td>
    			<td>
    				<select>
    			<option>计科</option>
    			<option>信管</option>
    			<option>信技</option>
    			</select>
    			</td>
    			<td>
    			<textarea rows=2 cols=10>
    			</textarea>
    			</td>
    			</tr>
    			
    			<tr>
    			<td class="t1">
    			<input type="text" size="12" value="请输入你的名字">
    			</td>
    			
    			<td>
    			<select>
    			<option>2011</option>
    			<option>2012</option>
    			<option>2013</option>
    			</select>
    			</td>
    			
    			<td>
    			<input type="radio" name="sex">男
         		<input type="radio" name="sex">女			
    			   </td>
    			<td>
    				<select>
    			<option>计科</option>
    			<option>信管</option>
    			<option>信技</option>
    			</select>
    			</td>
    			<td>
    			<textarea rows=2 cols=10>
    			</textarea>
    			</td>
    			</tr>
    			
    			<tr>
    			<td class="t1">
    			<input type="text" size="12" value="请输入你的名字">
    			</td>
    			
    			<td>
    			<select>
    			<option>2011</option>
    			<option>2012</option>
    			<option>2013</option>
    			</select>
    			</td>
    			
    			<td>
    			<input type="radio" name="sex">男
         		<input type="radio" name="sex">女		
    			   </td>
    			<td>
    				<select>
    			<option>计科</option>
    			<option>信管</option>
    			<option>信技</option>
    			</select>
    			</td>
    			<td>
    			<textarea rows=2 cols=10>
    			</textarea>
    			</td>
    			</tr>
    		</table>
    	</body>
    </html>


  • 相关阅读:
    Java和.NET(C#)的开发用到的技术对比总结
    Sql 调优总结
    10分钟开发 GPS 应用,了解一下
    windows 命令行操作 Mysql 数据库
    【C# 复习总结】类、继承和接口
    【C#复习总结】探究各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字
    【C#复习总结】析构函数
    【C#复习总结】垃圾回收机制(GC)2
    【C#复习总结】垃圾回收机制(GC)1
    设计原则总结
  • 原文地址:https://www.cnblogs.com/fuhaots2009/p/3363345.html
Copyright © 2020-2023  润新知