CSS写表格

简介: <!DOCTYPE HTML><html><head> <meta http-equiv="Content_Type"content="text/html";charset=utf-8> <title>个人信息登记</title><style> caption{height:50px

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


目录
相关文章
|
7月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
73 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
27天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
49 12
|
5月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
192 0
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
53 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
83 1