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;width:130px;
	border:1px solid gray;
	background-color:#D6D3D6;}
 
	.topleft{width:120px; background-color:#C6C7C6;}
 
	td{height:60px;width:130px;
	border:1px solid gray;
	background-color:#C6C7C6;
	text-align:center;}
 
	.t1{width:120px; background-color:#BDBABD;}
 
 #out1{border-top:60px solid transparent;
      border-left:60px solid #BDBABD;
	  height:0px;width:0px;
	  position:relative;
	  float:left;} 
	  
#out2{border-top:30px solid #D6D3D6;
      border-left:120px solid transparent;
	  height:0px;width:0px;
	  }
	  
	  #in1{position:absolute; width:50px; top:-60px; left:10px;}
	  #in2{position:absolute; width:50px; top:-30px; left:-10px;}
	  #in3{position:absolute; width: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>


 

 

posted on 2013-10-11 14:31  我的小人生  阅读(343)  评论(0编辑  收藏  举报