一个像素边框的表格:

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

    www.linux.org/threads/beats-audio-on-linux.4443/ askubuntu.com/questions/303775/envy-15-beats-audio- ...

  2. libevent在windows下使用步骤详解

    一 环境 官方下载地址:http://libevent.org/版本:libevent-2.0.22-stable 二 编译静态库 1 解压把上面下载到libevent-2.0.22-stable.t ...

  3. 格式化格林威治时间(Wed Aug 01 00:00:00 CST 2012)

    1.如果格林威治时间时间是date类型.(这种格式最简单)       SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd") ...

  4. JS中获取页面单选框radio和复选框checkbox中当前选中的值

    单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...

  5. js 基础笔记三

    词法结构: 1:区分大小写 2:特殊字符的区分,unicode转义 3:注释, //  ;  /* */ ; 4 : 标识字符和保留字 数据类型: 1原始类型 数字,字符串,布尔值.特殊的原始值(nu ...

  6. Sea.Js的运行原理(转)

    1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...

  7. PAT (Advanced Level) 1100. Mars Numbers (20)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  8. HDU 2671 Can't be easier

    简单的几何题目 点(a,b)关于直线Ax+By+C=1对称点的公式 #include<cstdio> #include<cstring> #include<cmath&g ...

  9. linux无法解析主机地址(could not resolve host)解决办法

    修改/etc/hosts文件: ip地址 域名 例:192.30.253.120 codeload.github.com

  10. Chrome 43+浏览器 Cookies encrypted_value解密脚本

    python 3.3.5 # -*- coding: utf-8 -*- # Used information from: # http://stackoverflow.com/questions/4 ...