一个像素边框的表格:

Info Header 1 Info Header 2 Info Header 3
Text 1A Text 1B Text 1C
Text 2A Text 2B Text 2C


  1. <!-- CSS goes in the document HEAD or added to your external stylesheet -->
  2. <style type="text/css">
  3. table.gridtable {
  4. font-family: verdana,arial,sans-serif;
  5. font-size:11px;
  6. color:#333333;
  7. border-width: 1px;
  8. border-color: #666666;
  9. border-collapse: collapse;
  10. }
  11. table.gridtable th {
  12. border-width: 1px;
  13. padding: 8px;
  14. border-style: solid;
  15. border-color: #666666;
  16. background-color: #dedede;
  17. }
  18. table.gridtable td {
  19. border-width: 1px;
  20. padding: 8px;
  21. border-style: solid;
  22. border-color: #666666;
  23. background-color: #ffffff;
  24. }
  25. </style>
  26. <!-- Table goes in the document BODY -->
  27. <table class="gridtable">
  28. <tr>
  29. <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
  30. </tr>
  31. <tr>
  32. <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
  33. </tr>
  34. <tr>
  35. <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
  36. </tr>
  37. </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的日志 - 网易博客的更多相关文章

  1. 【绿茶书情】:《SOHO小报》和《凤… - 绿茶的日志 - 网易博客

    [绿茶书情]:<SOHO小报>和<凤- - 绿茶的日志 - 网易博客 [绿茶书情]:<SOHO小报>和<凤-  

  2. python海明距离 - 5IVI4I_I_60Y的日志 - 网易博客

    python海明距离 - 5IVI4I_I_60Y的日志 - 网易博客 python海明距离   2009-10-01 09:50:41|  分类: Python |  标签: |举报 |字号大中小  ...

  3. QT与JavaScript互调 - 虹的日志 - 网易博客

    QT与JavaScript互调 - 虹的日志 - 网易博客 QT与JavaScript互调   2012-05-29 21:43:14|  分类: 技术 |  标签:qt  javascript  w ...

  4. stringstream clear()的疑问 - yuanshuilee的日志 - 网易博客

    stringstream clear()的疑问 - yuanshuilee的日志 - 网易博客 stringstream clear()的疑问   2013-09-05 08:43:13|  分类: ...

  5. Org-mode五分钟教程ZZZ - Kaka Abel的日志 - 网易博客

    Org-mode五分钟教程ZZZ - Kaka Abel的日志 - 网易博客 Org-mode五分钟教程ZZZ  

  6. 【错误】expected constructor, destructor, or type conversion before '.' token - 第八个游侠的日志 - 网易博客

    [错误]expected constructor, destructor, or type conversion before '.' token - 第八个游侠的日志 - 网易博客 [错误]expe ...

  7. random_shuffle (stl算法)打乱顺序 - 飞不会的日志 - 网易博客

    random_shuffle (stl算法)打乱顺序 - 飞不会的日志 - 网易博客 random_shuffle (stl算法)打乱顺序 2012-03-31 10:39:11|  分类: 算法 | ...

  8. 你有PSD的学位吗? - dp的日志 - 网易博客

    你有PSD的学位吗? - dp的日志 - 网易博客 你有PSD的学位吗? 2011-08-01 12:58:40|  分类: 感悟 |  标签:自我提升   |字号 大中小 订阅       去年, ...

  9. Java内存回收 - 落日之心的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. Windows GTK+ 环境搭建(详解)

    来源:http://blog.sina.com.cn/s/blog_a6fb6cc901017ygy.html Windows GTK+ 环境搭建 最近要做界面的一些东西,但是对微软提供的类库MFC不 ...

  2. 上海赛趣-top.mainFrame.tabAddHandler方法详解

    top.mainFrame.tabAddHandler("item"+Id,'项目:'+itemname,'<%=basePath%>bizitem/goEditIte ...

  3. css3的box-sizing

    给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示.用box-sizing:border-box,可以去除边框的占位. 浏览器支持IE9以上及火狐.谷歌.Ope ...

  4. 【多重背包模板】poj 1014

    #include <iostream> #include <stdio.h> #include <cstring> #define INF 100000000 us ...

  5. 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 ...

  6. iOS 程序性能优化

    前言 转载自:http://www.samirchen.com/ios-performance-optimization/ 程序性能优化不应该是一件放在功能完成之后的事,对性能的概念应该从我们一开始写 ...

  7. java断点

    第一步: 用firefox运行程序,当点击保存,提示保存失败后,启动firebug 通过请求找到addNew.ezt出现错误,在eztnews.xml里通过ctrl+F查找找到请求执行的类和方法 找到 ...

  8. js框架——angular.js(2)

    1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...

  9. 学习笔记——原型模式Prototype

    原型模式,简单说就是具有一个克隆方法,外部可以直接使用此方法得到相应对象的拷贝对象. 比如哆啦A梦的复制镜,一照,就把物品拷贝了一份(虽然是镜子复制是相反的,这里就忽略这个细节了) C++中依靠拷贝构 ...

  10. HDU - 2802 F(N) (周期)

    题目链接:HDU 2009-4 Programming Contest 分析:具有一定的周期性——4018处理下就可以A了 Sample Input Sample Output AC代码: #incl ...