您的位置：首页 > Web前端 > CSS

CSS写的简单表格示例

2013-10-11 17:03 459 查看 



<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航