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>


  • 相关阅读:
    【转】nginx(一) nginx详解
    美好生活需要全方位的保障
    Oracle私网mtu滚动修改实施方案
    小知识:后台执行Oracle创建索引免受会话中断影响
    小知识:Oracle RAC添加服务名实现单节点访问
    Windows平台安装Oracle11.2.0.4客户端报错INS-30131
    小知识:如何赋予用户查看所有存储过程和触发器的权限
    小知识:如何判定crontab任务的执行频度
    小知识:解决EXP-00003的报错
    Oracle删除索引规范
  • 原文地址:https://www.cnblogs.com/fuhaots2009/p/3363345.html
Copyright © 2011-2022 走看看