漂亮的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& ...
随机推荐
- mynotebook
www.linux.org/threads/beats-audio-on-linux.4443/ askubuntu.com/questions/303775/envy-15-beats-audio- ...
- libevent在windows下使用步骤详解
一 环境 官方下载地址:http://libevent.org/版本:libevent-2.0.22-stable 二 编译静态库 1 解压把上面下载到libevent-2.0.22-stable.t ...
- 格式化格林威治时间(Wed Aug 01 00:00:00 CST 2012)
1.如果格林威治时间时间是date类型.(这种格式最简单) SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd") ...
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...
- js 基础笔记三
词法结构: 1:区分大小写 2:特殊字符的区分,unicode转义 3:注释, // ; /* */ ; 4 : 标识字符和保留字 数据类型: 1原始类型 数字,字符串,布尔值.特殊的原始值(nu ...
- Sea.Js的运行原理(转)
1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...
- PAT (Advanced Level) 1100. Mars Numbers (20)
简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...
- HDU 2671 Can't be easier
简单的几何题目 点(a,b)关于直线Ax+By+C=1对称点的公式 #include<cstdio> #include<cstring> #include<cmath&g ...
- linux无法解析主机地址(could not resolve host)解决办法
修改/etc/hosts文件: ip地址 域名 例:192.30.253.120 codeload.github.com
- Chrome 43+浏览器 Cookies encrypted_value解密脚本
python 3.3.5 # -*- coding: utf-8 -*- # Used information from: # http://stackoverflow.com/questions/4 ...