漂亮的HTML表格 - ebirdfighter的日志 - 网易博客
一个像素边框的表格:
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
有背景图片的表格:
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
代码如下:
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
<!-- Table goes in the document BODY -->
<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
间隔彩色行表格:
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
Text 3A | Text 3B | Text 3C |
Text 4A | Text 4B | Text 4C |
Text 5A | Text 5B | Text 5C |
代码如下:
<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
鼠标停留时高亮行的表格:
Info Header 1 | Info Header 2 | Info Header 3 |
---|---|---|
Item 1A | Item 1B | Item 1C |
Item 2A | Item 2B | Item 2C |
Item 3A | Item 3B | Item 3C |
Item 4A | Item 4B | Item 4C |
Item 5A | Item 5B | Item 5C |
代码如下:
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>
漂亮的HTML表格 - ebirdfighter的日志 - 网易博客的更多相关文章
- 【绿茶书情】:《SOHO小报》和《凤… - 绿茶的日志 - 网易博客
[绿茶书情]:<SOHO小报>和<凤- - 绿茶的日志 - 网易博客 [绿茶书情]:<SOHO小报>和<凤-
- python海明距离 - 5IVI4I_I_60Y的日志 - 网易博客
python海明距离 - 5IVI4I_I_60Y的日志 - 网易博客 python海明距离 2009-10-01 09:50:41| 分类: Python | 标签: |举报 |字号大中小 ...
- QT与JavaScript互调 - 虹的日志 - 网易博客
QT与JavaScript互调 - 虹的日志 - 网易博客 QT与JavaScript互调 2012-05-29 21:43:14| 分类: 技术 | 标签:qt javascript w ...
- stringstream clear()的疑问 - yuanshuilee的日志 - 网易博客
stringstream clear()的疑问 - yuanshuilee的日志 - 网易博客 stringstream clear()的疑问 2013-09-05 08:43:13| 分类: ...
- Org-mode五分钟教程ZZZ - Kaka Abel的日志 - 网易博客
Org-mode五分钟教程ZZZ - Kaka Abel的日志 - 网易博客 Org-mode五分钟教程ZZZ
- 【错误】expected constructor, destructor, or type conversion before '.' token - 第八个游侠的日志 - 网易博客
[错误]expected constructor, destructor, or type conversion before '.' token - 第八个游侠的日志 - 网易博客 [错误]expe ...
- random_shuffle (stl算法)打乱顺序 - 飞不会的日志 - 网易博客
random_shuffle (stl算法)打乱顺序 - 飞不会的日志 - 网易博客 random_shuffle (stl算法)打乱顺序 2012-03-31 10:39:11| 分类: 算法 | ...
- 你有PSD的学位吗? - dp的日志 - 网易博客
你有PSD的学位吗? - dp的日志 - 网易博客 你有PSD的学位吗? 2011-08-01 12:58:40| 分类: 感悟 | 标签:自我提升 |字号 大中小 订阅 去年, ...
- Java内存回收 - 落日之心的日志 - 网易博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
随机推荐
- Windows GTK+ 环境搭建(详解)
来源:http://blog.sina.com.cn/s/blog_a6fb6cc901017ygy.html Windows GTK+ 环境搭建 最近要做界面的一些东西,但是对微软提供的类库MFC不 ...
- 上海赛趣-top.mainFrame.tabAddHandler方法详解
top.mainFrame.tabAddHandler("item"+Id,'项目:'+itemname,'<%=basePath%>bizitem/goEditIte ...
- css3的box-sizing
给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示.用box-sizing:border-box,可以去除边框的占位. 浏览器支持IE9以上及火狐.谷歌.Ope ...
- 【多重背包模板】poj 1014
#include <iostream> #include <stdio.h> #include <cstring> #define INF 100000000 us ...
- F(k)<(维护+枚举)\(找规律+递推+枚举)>
题意 小明有一个不降序列(f(1),f(2),f(3),--),f(k)代表在这个序列中大小是k的有f(k)个.我们规定f(n)的前12项如下图. n 1 2 3 4 5 6 7 8 9 10 11 ...
- iOS 程序性能优化
前言 转载自:http://www.samirchen.com/ios-performance-optimization/ 程序性能优化不应该是一件放在功能完成之后的事,对性能的概念应该从我们一开始写 ...
- java断点
第一步: 用firefox运行程序,当点击保存,提示保存失败后,启动firebug 通过请求找到addNew.ezt出现错误,在eztnews.xml里通过ctrl+F查找找到请求执行的类和方法 找到 ...
- js框架——angular.js(2)
1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...
- 学习笔记——原型模式Prototype
原型模式,简单说就是具有一个克隆方法,外部可以直接使用此方法得到相应对象的拷贝对象. 比如哆啦A梦的复制镜,一照,就把物品拷贝了一份(虽然是镜子复制是相反的,这里就忽略这个细节了) C++中依靠拷贝构 ...
- HDU - 2802 F(N) (周期)
题目链接:HDU 2009-4 Programming Contest 分析:具有一定的周期性——4018处理下就可以A了 Sample Input Sample Output AC代码: #incl ...