首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS写报表

2013-10-11 
CSS写表格!DOCTYPE HTMLhtmlheadmeta http-equivContent_Typecontenttext/htmlcharsetutf-

CSS写表格

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>


热点排行