根据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" />
<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.t1{...}{
    border:1px solid #cad9ea;
    color:#666;
}
table.t1 th {...}{
    background-image: url(th_bg1.gif);
    background-repeat::repeat-x;
    height:30px;
}
table.t1 td,table.t1 th{...}{
    border:1px solid #cad9ea;
    padding:0 1em 0;
}
table.t1 tr.a1{...}{
    background-color:#f5fafe;
}



table.t2{...}{
    border:1px solid #9db3c5;
    color:#666;
}
table.t2 th {...}{
    background-image: url(th_bg2.gif);
    background-repeat::repeat-x;
    height:30px;
    color:#fff;
}
table.t2 td{...}{
    border:1px dotted #cad9ea;
    padding:0 2px 0;
}
table.t2 th{...}{
    border:1px solid #a7d1fd;
    padding:0 2px 0;
}
table.t2 tr.a1{...}{
    background-color:#e8f3fd;
}



table.t3{...}{
    border:1px solid #fc58a6;
    color:#720337;
}
table.t3 th {...}{
    background-image: url(th_bg3.gif);
    background-repeat::repeat-x;
    height:30px;
    color:#35031b;
}
table.t3 td{...}{
    border:1px dashed #feb8d9;
    padding:0 1.5em 0;
}
table.t3 th{...}{
    border:1px solid #b9f9dc;
    padding:0 2px 0;
}
table.t3 tr.a1{...}{
    background-color:#fbd8e8;
}

-->
</style>
<script type="text/javascript">...
    function ApplyStyle(s)...{
        document.getElementById("mytab").className=s.innerText;
    }
</script>
</head>

<body>
<div class="title">
    <h1>大家好。CSS与表格的结合演示样例</h1>
    <table><tr><td>
        点击链接切换样式：<a href="javascript:;" onclick="ApplyStyle(this)">t1</a>
        <a href="javascript:;" onclick="ApplyStyle(this)">t2</a>
        <a href="javascript:;" onclick="ApplyStyle(this)">t3</a>
    </td></tr></table>
</div>
<table width="90%" id="mytab"  border="1" class="t1">
  <thead>
    <th width="10%">网名</th>
    <th width="30%">博客</th>
    <th width="20%">电邮</th>
    <th width="30%">网络硬盘</th>
    <th width="10%">QQ</th>
  </thead>
  <tr class="a1">
    <td>wallimn</td>
    <td>http://blog.csdn.net/wallimn</td>
    <td>wallimn@tom.com</td>
    <td>http://wallimn.ys168.com</td>
    <td>54871876</td>
  </tr>
  <tr>
    <td>长三江</td>
    <td>村在</td>
    <td>北京天安门</td>
    <td>东四十条</td>
    <td>21345678</td>
  </tr>
  <tr class="a1">
    <td>长三江</td>
    <td>村在</td>
    <td>北京天安门</td>
    <td>东四十条</td>
    <td>21345678</td>
  </tr>
  <tr>
    <td>长三江</td>
    <td>村在</td>
    <td>北京天安门</td>
    <td>东四十条</td>
    <td>21345678</td>
  </tr>
  <tr class="a1">
    <td>wallimn</td>
    <td>http://blog.csdn.net/wallimn</td>
    <td>wallimn@tom.com</td>
    <td>http://wallimn.ys168.com</td>
    <td>54871876</td>
  </tr>
  <tr>
    <td>长三江</td>
    <td>村在</td>
    <td>北京天安门</td>
    <td>东四十条</td>
    <td>21345678</td>
  </tr>
  <tr class="a1">
    <td>长三江</td>
    <td>村在</td>
    <td>北京天安门</td>
    <td>东四十条</td>
    <td>21345678</td>
  </tr>
  <tr>
    <td>长三江</td>
    <td>村在</td>
    <td>北京天安门</td>
    <td>东四十条</td>
    <td>21345678</td>
  </tr>
</table>

</body>
</html>

我的网络驱动器可以下载源代码：http://wallimn.ys168.com

漂亮的表格样式(使用CSS样式表控制表格样式)的更多相关文章

  1. 漂亮的表格样式–>使用CSS样式表控制表格样式

    依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...

  2. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  3. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  4. BootStrap的table表格，栅格系统，form表单的样式

    BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用B ...

  5. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  6. css样式表中的样式覆盖顺序

    刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...

  7. CSS 小结笔记之三种样式表

    CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...

  8. css样式表中的样式覆盖顺序(转)

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  9. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

随机推荐

  1. ASP.NET常被忽视的一些细节

    原文:ASP.NET常被忽视的一些细节 前段时间碰到一个问题:为什么在ASP.NET程序中定时器有时候会不工作? 这个问题看起来很奇怪,代码好像也没错,但就是结果与预期不一致. 其实这里是ASP.NE ...

  2. 与众不同 windows phone (22) - Device（设备）之摄像头（硬件快门, 自动对焦, 实时修改捕获视频）

    原文:与众不同 windows phone (22) - Device(设备)之摄像头(硬件快门, 自动对焦, 实时修改捕获视频) [索引页][源码下载] 与众不同 windows phone (22 ...

  3. jquery中怎么删除<ul>中的整个<li>包括节点

    .$('ul li').remove(); .$('ul li').each(function(){ $(this).remove(); }); .$("ul").find(&qu ...

  4. 打印class文件的Java编译器内部的版本号

    当改变了jdk版本时,在编译java时,会遇到Unsupported major.minor version错误.错误信息如下 : Unsupported major.minor version 50 ...

  5. Common Lisp第三方库介绍 | (R "think-of-lisper" 'Albertlee)

    Common Lisp第三方库介绍 | (R "think-of-lisper" 'Albertlee) Common Lisp第三方库介绍 一个丰富且高质量的开发库集合,对于实际 ...

  6. 此三层非彼三层——MVC&amp;UBD

    学习了三年编程了,到如今这个阶段,開始接触架构,開始认识架构,怎样设计一个程序的结构,学名称"架构模式"(architectural pattern).个人经历告诉我这在编程中是一 ...

  7. 【MFC两种视频图像採集方法】DirectShow与Opencv

    效果图: DirectShow採集核心代码: 创建线程调用该函数,採集图像通过x264解码封装rtmp协议包.推送至FMSserver,可实现视频直播 UINT __stdcall StartVide ...

  8. WSDL中文版——详解

    为什么使用WSDL? 像Internet协议之类的标准有没有为权威所利用,或者人们这样看待它是因为顺之所获的好处远远超出了代价?曾经有许多试图建立的标准都流产了.有时候,那些还没有普遍使用的标准甚至由 ...

  9. linux使用进阶（一）

    本文依据<应该知道的Linux技巧>coolshell上的一篇文章提到的Linux技巧,结合自己掌握的情况进行扩展和总结得来.主要包含下面内容:     一.日常操作     二.数据处理 ...

  10. spring Annotation 组分注塑

    spring 注意分类 启动spring自己主动扫描功能 <context:component-scan/> 1.@Repository: 它用于将数据訪问层 (DAO 层 ) 的类标识为 ...