表格设计

原创 2018年04月16日 08:15:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* border-collapse  
*/
table{
width: 400px;
border-collapse: collapse;

}
td{
border: 1px solid grey;
text-align:center;
}

.td0{
border-bottom: 1px solid red;
}
.td1{
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
.td13{
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.tdleft{
text-align:left;
}
.tdright{
text-align:right;
}

div{
width: 200px;
height: 50px;
line-height: 50px;
background-color: #999999;
text-align: center;
margin-left: 50px;
border: 1px solid blue;
border-radius: 3px;
cursor: pointer;
float: left;
}
a{
float: left;
margin-left: 50px;
}

.inputerror{
border: 1px solid red;
}

</style>
</head>
<body>
<table >
<tr style="background-color: lightgoldenrodyellow;">
<td>名字</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td class="td0">张三</td>
<td class="td0 tdleft">18</td>
<td class="td0 tdright">男</td>
</tr>
<tr>
<td class="td1">李思思</td>
<td class="td1 tdleft">19</td>
<td class="td13 tdright">女</td>
</tr>
<tr>
<td class="td0">王呜呜</td>
<td class="td0 tdleft">20</td>
<td class="td0 tdright">男</td>
</tr>
<tr>
<td class="td1">赵琪琪</td>
<td class="td1 tdleft">23</td>
<td class="td13 tdright">女</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
</table><br />
<div>
移动到我上面变小手
</div>
<a href="#">我是超链接</a><br /><br /><br /><br />

<input type="text" id="id8" onblur="checkvalue();" onfocus="initcss();"/>
</body>

<script type="text/javascript">
function checkvalue(){
var v = document.getElementById("id8");

if(v.value.length==0){
//把框变成红色
v.style = "border:1px solid red";

}
}

//去掉样式
function initcss(){
var v = document.getElementById("id8");
v.style = "";
}
</script>
</html>

基于HTML的表格设计

  • 2017年09月16日 19:54
  • 819B
  • 下载

【可视化】表格的设计

由于工作原因,经常接触到表格。我们发现,表格不但广泛的运用在各类数据收集和分析,同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式),能够很好的表达信息之间的逻辑...
  • yixiantian7
  • yixiantian7
  • 2016-06-06 14:50:45
  • 1254

网页表格设计生成工具Arclab.Web.Form.Builder.3.5

  • 2014年08月22日 13:49
  • 11.76MB
  • 下载

变化多端 – 多种纯CSS的HTML表格设计

介绍 在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之。但在实际项目开发中,一碰到规整的数据显示,不知不觉又会用起它。可见其生命力之顽强。 这...
  • eengel
  • eengel
  • 2015-08-03 20:00:47
  • 15756

jsp设计中动态表格的设计

在J2EE设计 中 对明细表的操作,比较多用到的一个js,就是表的动态添加和删除,以及表数据内的数值运算.其实这些都不能,唯一要考虑的就是如何去动态的处理.1.建一个表框架,其实就是表头,列出表的第一...
  • leniz
  • leniz
  • 2006-01-04 15:29:00
  • 7000

QT 电子表格(Designer设计版)

  • 2009年11月26日 22:55
  • 2.62MB
  • 下载

使用table表格设计调查表

#table1{ } #table1{ background-color:#B0C4DE; } .td1{ border-top:1px solid; border-right:1p...
  • huzijia888
  • huzijia888
  • 2017-11-17 13:22:19
  • 55

HTML设计显示表格

HTML设计显示表格           表格在最初的HTML中,仅仅是用于存放各种数据的,因此,表格有很多与数据相关的标记,非常方便。 年度收入 ...
  • nangeali
  • nangeali
  • 2016-10-08 10:10:45
  • 561

网页表格探秘,表格的设计方法

  • 2009年11月17日 09:44
  • 309KB
  • 下载

树形表设计

一、树型关系的数据表不少程序员在进行数据库设计的时候都遇到过树型关系的数据,例如常见的类别表,即一个大类,下面有若干个子类,某些子类又有子类这样的情况。当类别不确定,用户希望可以在任意类别下添加新的子...
  • wangdeng1314
  • wangdeng1314
  • 2011-05-18 21:28:00
  • 3796
收藏助手
不良信息举报
您举报文章:表格设计
举报原因:
原因补充:

(最多只允许输入30个字)