CSS写报表-HTML教程-爱易网页

CSS写报表

日期：2014-05-16　浏览次数：20671 次

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS写报表

相关资料更多>

推荐阅读更多>