CSS写的简单表格示例
CSS写的简单表格示例
发布时间:2017-01-07 来源:查字典编辑
摘要:个人信息登记caption{height:50px;font-size:30px;font-weight:bold;}table{borde...

1

<!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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类