漂亮的表格样式–>使用CSS样式表控制表格样式
依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。现在介绍使用CSS样式表来控制、美化表格的方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>精美的表格样式</title>
<style type="text/css">
<!--
body,table{
font-size:12px;
}
table{
table-layout:fixed;
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}
td{
height:20px;
}
h1,h2,h3{
font-size:12px;
margin:0;
padding:0;
}
.title { background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
.title h1 { line-height: 31px; text-align:center; background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
.title th, .title td { border: 1px solid #CAD9EA; padding: 5px; }
//样式一
table.tab_css_1{
border:1px solid #cad9ea;
color:#666;
}
table.tab_css_1 th {
background-image: url(th_bg1.gif);
background-repeat::repeat-x;
height:30px;
}
table.tab_css_1 td,table.tab_css_1 th{
border:1px solid #cad9ea;
padding:0 1em 0;
}
table.tab_css_1 tr.tr_css{
background-color:#f5fafe;
}
//样式二
table.tab_css_2{
border:1px solid #9db3c5;
color:#666;
}
table.tab_css_2 th {
background-image: url(th_bg2.gif);
background-repeat::repeat-x;
height:30px;
color:#fff;
}
table.tab_css_2 td{
border:1px dotted #cad9ea;
padding:0 2px 0;
}
table.tab_css_2 th{
border:1px solid #a7d1fd;
padding:0 2px 0;
}
table.tab_css_2 tr.tr_css{
background-color:#e8f3fd;
}
//样式三
table.tab_css_3{
border:1px solid #fc58a6;
color:#720337;
}
table.tab_css_3 th {
background-image: url(th_bg3.gif);
background-repeat::repeat-x;
height:30px;
color:#35031b;
}
table.tab_css_3 td{
border:1px dashed #feb8d9;
padding:0 1.5em 0;
}
table.tab_css_3 th{
border:1px solid #b9f9dc;
padding:0 2px 0;
}
table.tab_css_3 tr.tr_css{
background-color:#fbd8e8;
}
.hover{
background-color: #53AB38;
color: #fff;
}
-->
</style>
<script type="text/javascript">
function ApplyStyle(s){
document.getElementById("mytab").className=s.innerText;
}
$(function(){
addHover('mytab');
});
/**
* 在鼠标悬停时突出显示行--jQuery处理表格
*
* @tab table id
*/
function addHover(tab){
$('#'+tab+' tr').hover(
function(){
$(this).find('td').addClass('hover');
},
function(){
$(this).find('td').removeClass('hover');
}
);
}
</script>
</head>
<body>
<div class="title">
<h1>大家好，CSS与表格的结合示例</h1>
<table><tr><td>
点击链接切换样式：<a href="javascript:;" onclick="ApplyStyle(this)">tab_css_1</a>
<a href="javascript:;" onclick="ApplyStyle(this)">tab_css_2</a>
<a href="javascript:;" onclick="ApplyStyle(this)">tab_css_3</a>
</td></tr></table>
</div>
<table width="90%" id="mytab" border="1" class="tab_css_1">
<thead>
<th width="10%">网名</th>
<th width="30%">博客</th>
<th width="20%">电邮</th>
<th width="10%">QQ</th>
</thead>
<tr class="tr_css">
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr>
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr class="tr_css">
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr>
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr class="tr_css">
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr>
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr class="tr_css">
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
<tr>
<td>Ruthless</td>
<td>http://www.tieguanyin168.com/</td>
<td>416501600@qq.com</td>
<td>416501600</td>
</tr>
</table>
</body>
</html>
漂亮的表格样式–>使用CSS样式表控制表格样式的更多相关文章
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
- BootStrap的table表格，栅格系统，form表单的样式
BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用B ...
- CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- css样式表中的样式覆盖顺序
刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...
- CSS 小结笔记之三种样式表
CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...
- css样式表中的样式覆盖顺序(转)
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
随机推荐
- 一个查看Cookie的便捷工具——EditThisCookie
Appium正在努力准备中,很快就要和大家见面了- 今天给大家分享一个查看cookies的工具,用fiddler总感觉有点麻烦,还乱七八糟的找不到到底哪个链接是当前网站的cookies: 首先,你用的 ...
- PHP匹配Email、URL、IP
/* * 正则表达式匹配 */ $email = '137813369@qq.com'; $regex = '/\w+([−+.]\w+)*@\w+([−.]\w+)*\.\w+([−.]\w+)*/ ...
- 从hello world 说程序运行机制
转自:http://www.cnblogs.com/yanlingyin/archive/2012/03/05/2379199.html 开篇 学习任何一门编程语言,都会从hello world 开始 ...
- python string 之 format, join, split
功能太强大. 经常看到很多简洁, 高级的用法. 但是基本思路是{}代替了以前的%. In [1]: '{0},{1}'.format('kzc',18) Out[1]: 'kzc,18' In [2] ...
- lapis docker 运行说明
1. lapis docker 镜像制作 因为openresty 新版本一个json 库的问题,我们使用的是 openresty:1.11.2.1 基础镜像 FROM openresty/openre ...
- 一款直接时空处理分析的开源数据库---geomesa
一款直接时空处理分析的开源数据库---geomesa,可用于交通轨迹数据存储分析等相关领域, 在分布式列数据库的基础上进行扩展,目前支持Accumulo, HBase, Cassandra, and ...
- bzoj 3158 千钧一发——网络流
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3158 发现偶数之间一定满足第二个条件:奇数之间一定满足第一个条件 ( \( (2m+1)^{ ...
- redis数据结构对象
redis的数据结构对象包括 字符串 列表 哈希 集合 有序集合五种数据结构对象,由底层的8种数据结构组成这五种对象,每种对象的实现不同的数据都是不一样的. 结构 typedef struct red ...
- Oracle事务的ACID特性
Oracle事务的ACID特性 1.原子性(Atomicity) 事务的原子性是指事务中包含的所有操作要么都做,要么都不做,保证数据库是一致的. 例如:A帐户向B帐户划账1000,则先将A减少1000 ...
- Android ListView的item背景色设置
1.如何改变item的背景色和按下颜色 listview默认情况下,item的背景色是黑色,在用户点击时是黄色的.如果需要修改为自定义的背景颜色,一般情况下有三种方法: 1)设置listSelecto ...