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>
时间: 2025-01-27 05:06:14

CSS写表格的相关文章

CSS写的简单表格示例

使用CSS写表格,不要有所怀疑,主要是对html结构进行css样式重定义,大家可以看看效果图,个人感觉还不错,感兴趣的朋友可以参考下     复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content_Type" content="text/html";charset=utf-8> <title>个人信息登记</title>

详解DIV+CSS与表格建站的区别

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 现在全国大大小小的网站都在搞一场技术"革命",就是所谓"网站重构"说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化在重构之前,肯定要了解为什么重构,为什么要用DIV+CSS技术?了解了这个问题,那么大家才有使用此技术重构网站的动力.各大CSS学

用CSS设置表格边框的语法详解

css|详解|语法      我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin

CSS有关表格边框的语法汇总

css|语法 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | mediu

修饰之美:CSS在表格边框上的美学应用

css 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium |

用CSS和表格代码实现每行交替颜色的效果比较

css|比较 用CSS写出表格每行交替颜色的效果 关于用CSS定义,来表现出表格每行不同的颜色,用来区分每行数据,方便阅读.其中有的是利用IE的BUG,在CSS里面添加动态的内容,IE会解析它,这个先不谈,因为和主题没有关系. 还看到几个很简单的方法,利用给不同的标签不同的背景色达到效果,先看这个方法的CSS th {font-weight: normal; text-align:left; background: #CCCCCC} td {background: #FAFAFA} 页面代码 <

CSS去除表格的默认间距并且制作1px的细线表

css 现在在所谓"div+css"的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table.但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有间距,所以我们通常开头是这样写的: <table border="0" cellspacing="0" cellpadding="0"> 在页面内,通过cellspacing="0&q

怎样用css美化表格的边框

我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thi

CSS在表格边框上的美学应用

怎样用css美化表格的边框.   有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 上边框宽度属性用于指定一个元素上边框的宽度.值可以是三个关键字其中的一个,