<html>
<head>
<title>一款经典实用的表格效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
*{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}
table{
width:100%;
margin:0px auto;
font:Georgia 11px;
font-size:12px;
color:#333333;
text-align:center;
border-collapse:collapse;/*细线表格代码*/
}
table td{
border:1px solid #999;/*细线表格线条颜色*/
height:22px;
}
caption{text-align:center;font-size:12px;font-weight:bold;margin:0 auto;}
tr.t1 td {background-color:#fff;}
tr.t2 td {background-color:#eee;}
tr.t3 td {background-color:#ccc;}
th,tfoot tr td{font-weight:bold;text-align:center;background:#c5c5c5;}
th{line-height:30px;height:30px;}
tfoot tr td{background:#fff;line-height:26px;height:26px;}
thead{border:1px solid #999;}
thead tr td{text-align:center;}
#page{text-align:center;float:right;}
#page a,#page a:visited{width:60px;height:22px;line-height:22px;border:1px black solid;display:block;float:left;margin:0 3px;background:#c9c9c9;
text-decoration:none;}
#page a:hover{background:#c1c1c1;text-decoration:none;}
.grayr {padding:2px;font-size:11px;background:#fff;float:right;}
.grayr a {padding:2px 5px;margin:2px;color:#000;text-decoration:none;;border:1px #c0c0c0 solid;}
.grayr a:hover {color:#000;border:1px orange solid;}
.grayr a:active {color:#000;background: #99ffff}
.grayr span.current {padding:2px 5px;font-weight:bold; margin:2px; color: #303030;background:#fff;border:1px orange solid;}
.grayr span.disabled {padding:2px 5px;margin:2px;color:#797979;background: #c1c1c1;border:1px #c1c1c1 solid;}
</style>
<script type="text/javascript">
<!--
function selectAll()
{
if(this.checked==true) {
checkAll('test');
}
else {
clearAll('test');
}
}
function checkAll(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = true;
}
}
}
function clearAll(name)
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = false;
}
}
}
-->
</script>
</head>
<body>
<table>
<caption>
<table>
<tr><td>1212</td></tr>
</table>
</caption>
<thead>
<tr>
<th>
<input onClick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消"/>
</th>
<th>昵称</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>电话</th>
<th>邮箱</th>
<th>QQ</th>
<th>主页</th>
</tr>
</thead>
<tbody id="tab">
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
<tr>
<td>
<input type="checkbox" value="a" name="test"/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>215288671@qq.com</td>
<td>215288671</td>
<td>http://www.865171.cn</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input onClick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消"/>
</td>
<td colspan="8">
<div class="grayr"><span class="disabled"> < </span><span class="current">1</span><a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?page=7">7</a>...<a href="#?page=199">199</a><a
href="#?page=200">200</a><a href="#?page=2"> > </a></div>
</td>
</tr>
</tfoot>
</table>
<a href="
http://www.865171.cn">免费模板网</a>
<script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].style.backgroundColor = (i%2>0)?"#fff":"#eee";
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.style.backgroundColor = "#ccc";
};
Ptr[i].onmouseout=function(){
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].style.backgroundColor = (i%2>0)?"#eee":"#fff";
}
}
}
//-->
</script>
</body>
</html>
分享到：
相关推荐
【简易的后台管理系统HTML静态页面】是一个用于模拟后台管理功能的简单网页项目，适用于初学者或快速原型设计。这个系统提供了基本的文章管理和图片管理功能，包括添加、删除、修改和查询等操作，可以帮助用户理解...
Java 后台生成的表格通常用于数据展示，但有时我们需要将这些动态生成的表格转换为图片格式，以便于分享、打印或保存。这就涉及到一个工具——HtmlImageGenerator，也称为Html2Image。这个工具能够将HTML页面转化为...
在网页设计中，HTML表格是一种常见的数据展示方式。它们用于组织和排列结构化的信息，如数据报告、统计分析等。本教程将深入探讨如何创建“漂亮的表格”并利用HTML、CSS和JavaScript增强用户体验。 首先，HTML是...
在实际应用中，开发者可以通过API接口获取数据，然后利用ECharts的API来绘制图表，同时结合Bootstrap的栅格系统和组件，如导航栏、按钮和表格，构建出一个完整的后台管理系统。例如，可以在表格中展示原始数据，点击...
【后台模板HTML+CSS】是一种常见的网页设计资源，主要用于构建网站的管理界面，即后台系统。后台模板通常包括登录页面、仪表盘、用户管理、数据展示、设置等多个功能模块，帮助开发者快速搭建功能完备的后台管理系统...
【描述】：“带登录页面，精美后台摸版，使用做站后台，系统后台等” 此模板集成了一个完整的登录页面，这是任何后台系统的基础组件，用于验证用户身份。登录页面设计简洁而专业，符合现代审美标准，能够提供良好的...
3. JavaScript库和插件：后台管理界面往往需要用到一些交互效果，例如数据表格（如Datatables）、图表（如Chart.js或Highcharts）、日期选择器（如Datepicker）等。这些功能通常由jQuery或其他JavaScript库和插件...
HTML表格是一种常用的数据展示工具，尤其在网页设计中不可或缺。"好看的html表格"是指通过HTML语言，结合CSS样式，创建出既美观又功能强大的表格。本文将深入探讨如何利用HTML和CSS来创建一个吸引人的表格。 首先，...
这个控件允许开发者在前台和后台生成表格，提供高度的自定义能力和丰富的用户体验。下面我们将详细探讨NetAdvantage UltraWebGrid的前台后台生成表格、JS方法以及示例代码中的关键知识点。 首先，让我们了解 ...
【标题】：“蓝白色HTML5响应式后台管理系统UI框架模板” 这个标题暗示了我们讨论的主题是一种基于HTML5技术设计的后台管理系统用户界面（UI）框架模板。这种模板采用了蓝白色调，旨在提供一种专业且清晰的视觉体验...
这个类允许我们将已有的HTML表格转换为具有分页和查询功能的交互式表格，完全使用JavaScript实现，不依赖任何后台技术，也不使用AJAX。 首先，我们需要理解JavaScript在其中的作用。JavaScript是一种客户端脚本语言...
【标题】：“html【极简】一款非常简约漂亮的后台管理系统html模板” 这款后台管理系统html模板以其极简的设计风格，为开发者提供了一种高效且美观的前端解决方案。它旨在通过简约的布局和设计，减少不必要的复杂性...
【标题】：“漂亮的通用后台 html模板 静态模板 后台模板” 【描述】：这个资源是一个设计精美、功能全面的通用后台HTML模板，专为构建高效、易用的后台管理系统界面而设计。作为静态模板，它无需服务器端语言支持...
后台模板通常包含了登录、导航、表格、图表、表单等多种网页元素，用于构建后台管理系统的用户界面。这些模板设计简洁高效，方便开发者根据业务需求进行定制和扩展。 "中文版"则意味着这套模板特别考虑了中文语言的...
【简洁整套后台管理系统html模板】是一个用于快速构建企业或个人后台管理界面的资源包，主要包含了一系列HTML页面和相关组件，旨在为开发者提供一个高效、直观的工作基础。该模板通常由专业网页设计师精心设计，遵循...
网页后台模板是构建网站后台管理界面的基础，它们通常由HTML（超文本标记语言）和CSS（层叠样式表）组成，用于定义页面的结构和样式。这些模板为开发者提供了快速构建用户界面的框架，节省了从零开始设计的时间。本...
"漂亮的表格css+html"这个主题就是关于如何利用HTML和CSS技术来创建吸引人的表格。HTML（超文本标记语言）是网页内容的基础结构，而CSS（层叠样式表）则是用于美化这些结构的工具。以下将详细介绍这两个技术在创建...
6. `basic_table.html`：基础表格，用于数据列表和简单查询，是后台管理界面的基本元素。 7. `buttons.html`：按钮设计，提供不同样式和功能的按钮，方便用户触发操作。 8. `general.html`：通用组件，可能包含各种...
在今天的分享中，我们将详细探讨如何使用layui的数据表格组件实现数据重载功能，并将参数传递给后端服务器。LAYui是一款前端UI框架，它提供了丰富的组件，其中包括用于显示和操作表格数据的表格组件。在实际开发中，...
在本文中，我们将深入探讨如何使用ExtJS框架在前端动态生成表格，并结合后端数据进行展示。ExtJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，尤其在创建交互式用户界面方面表现突出。动态生成表格是...