zoukankan      html  css  js  c++  java
  • 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>


  • 相关阅读:
    使用shell脚本备份PostgreSql
    java使用stream做二维数据统计,把List<Map>转换为Map<String,Map<String,Integer>>
    使用idea构建JavaFX项目
    SpringBoot(三) ---- SpringBoot启动加载器
    idea设置大全(三)------变量高亮设置
    延迟初始化占位类模式
    ThreadPoolExecutor构造参数分析
    postgresql插入或批量插入出现冲突时的处理方法
    java函数式接口
    MyBatis(二)批量插入insert语句拼接方式
  • 原文地址:https://www.cnblogs.com/fuhaots2009/p/3363345.html
Copyright © 2011-2022 走看看