CSS写的简单表格示例

使用CSS写表格,不要有所怀疑,主要是对html结构进行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>

时间: 2024-09-09 10:45:32

CSS写的简单表格示例的相关文章

Javascript jquery css 写的简单进度条控件_jquery

Javascript 进度条 Demo 原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式),详细信息可以参见链接:http://www.jb51.net/article/13993.htm  

jQuery简单入门示例之用户校验demo示例_jquery

本文实例讲述了jQuery简单入门示例之用户校验.分享给大家供大家参考,具体如下: jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可

谈CSS的标准和最佳示例-Div+CSS教程

本文的讲解将帮助你了解网站和CSS文件,还将帮助你们了解CSS文件中的内容.索引部分知识一个格式化了的CSS注释段落,CSS的标准和最佳示例. CSS是用来定义网站的用户界面或将显示和内容区分开来的. 由于CSS被广泛地使用在几乎所有网站上,所以让我们花些时间来创建样式表并确保它符合良好的标准.下面的技巧会极大地在开发过程中帮助CSS初学者. 索引 本处的定义将帮助你和其他开发者了解网站和CSS文件,还将帮助你们了解CSS文件中的内容.索引部分知识一个格式化了的CSS注释段落. 1给出CSS文件

XHTML+CSS写出正规的BLOG

 Blog的全名应该是Web log,中文意思是"网络日志",后来缩写为Blog,而博客(Blogger)就是写Blog的人.从理解上讲,博客是"一种表达个人思想.网络链接.内容,按照时间顺序排列,并且不断更新的出版方式".简单的说博客是一类人,这类人习惯于在网上写日记. 如何应用HTML和CSS写出漂亮正规的BLOG:       正确使用a标签       超链接是blog中用的最多的html标签,它用来链接到其他的文章或者站点链接,建议大家用a标签时将下列属性

XHTML+CSS写出正规BLOG

 Blog的全名应该是Web log,中文意思是"网络日志",后来缩写为Blog,而博客(Blogger)就是写Blog的人.从理解上讲,博客是"一种表达个人思想.网络链接.内容,按照时间顺序排列,并且不断更新的出版方式".简单的说博客是一类人,这类人习惯于在网上写日记. 如何应用HTML和CSS写出漂亮正规的BLOG:       正确使用a标签       超链接是blog中用的最多的html标签,它用来链接到其他的文章或者站点链接,建议大家用a标签时将下列属性

分享一个自己写的简单的javascript分页组件

 这篇文章主要分享一个自己写的简单的javascript分页组件,效果十分不错,代码也很详尽,这里推荐给小伙伴们.     自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下:   代码如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式,

js和css写一个可以自动隐藏的悬浮框_javascript技巧

今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态:   左边那一条窄线就是隐藏以后的悬浮框. 显示状态:   当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CS

从零开始学习OpenCL开发(二)一个最简单的示例与简单性能分析

欢迎关注 转载请注明 http://blog.csdn.net/leonwei/article/details/8893796   1 Hello OpenCL      这里编写一个最简单的示例程序,演示OpenCl的基本使用方法:     1.首先可以从Nvdia或者Amd或者Intel或者所有OpenCl成员的开发者网站上下载一份他们实现的OpenCL的SDK.虽然不同公司支持了不同版本的OpenCL和扩展ext,但是在相同版本上对于标准的OpenCL接口,每个SDK实现的结果都是一样的,

解析android framework下利用app_process来调用java写的命令及示例

解析android framework下利用app_process来调用java写的命令及示例          在android SDK的framework/base/cmds目录下了,有不少目录,这些目的最终都是build出一个bin文件,再存放到/system/bin目录下,对于C/CPP写的命令,我们还是比较好理解的,都有一个main函数作为入口,但是在cmds目录下还有一些原生代码是java的,比如input.settings,那么这种类型的命令是怎么实现的呢?       笔者研习了