html5 css3构造的漂亮表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
      <style>  
      
    body {  
    width: 600px;  
    margin: 40px auto;  
    font-family: 'trebuchet MS', 'Lucida sans', Arial;  
    font-size: 14px;  
    color: #444;  
    }  
      
    table {  
    *border-collapse: collapse; /* IE7 and lower */  
    border-spacing: 0;  
    width: 100%;  
    }  
      
    .bordered {  
    border: solid #ccc 1px;  
    -moz-border-radius: 6px;  
    -webkit-border-radius: 6px;  
    border-radius: 6px;  
    -webkit-box-shadow: 0 1px 1px #ccc;  
    -moz-box-shadow: 0 1px 1px #ccc;  
    box-shadow: 0 1px 1px #ccc;  
    }  
      
    .bordered tr:hover {  
    background: #fbf8e9;  
    -o-transition: all 0.1s ease-in-out;  
    -webkit-transition: all 0.1s ease-in-out;  
    -moz-transition: all 0.1s ease-in-out;  
    -ms-transition: all 0.1s ease-in-out;  
    transition: all 0.1s ease-in-out;  
    }  
      
    .bordered td, .bordered th {  
    border-left: 1px solid #ccc;  
    border-top: 1px solid #ccc;  
    padding: 10px;  
    text-align: left;  
    }  
      
    .bordered th {  
    background-color: #dce9f9;  
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));  
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);  
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);  
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);  
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);  
    background-image: linear-gradient(top, #ebf3fc, #dce9f9);  
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
    border-top: none;  
    text-shadow: 0 1px 0 rgba(255,255,255,.5);  
    }  
      
    .bordered td:first-child, .bordered th:first-child {  
    border-left: none;  
    }  
      
    .bordered th:first-child {  
    -moz-border-radius: 6px 0 0 0;  
    -webkit-border-radius: 6px 0 0 0;  
    border-radius: 6px 0 0 0;  
    }  
      
    .bordered th:last-child {  
    -moz-border-radius: 0 6px 0 0;  
    -webkit-border-radius: 0 6px 0 0;  
    border-radius: 0 6px 0 0;  
    }  
      
    .bordered th:only-child{  
    -moz-border-radius: 6px 6px 0 0;  
    -webkit-border-radius: 6px 6px 0 0;  
    border-radius: 6px 6px 0 0;  
    }  
      
    .bordered tr:last-child td:first-child {  
    -moz-border-radius: 0 0 0 6px;  
    -webkit-border-radius: 0 0 0 6px;  
    border-radius: 0 0 0 6px;  
    }  
      
    .bordered tr:last-child td:last-child {  
    -moz-border-radius: 0 0 6px 0;  
    -webkit-border-radius: 0 0 6px 0;  
    border-radius: 0 0 6px 0;  
    }  
      
    /*----------------------*/  
      
    .zebra td, .zebra th {  
    padding: 10px;  
    border-bottom: 1px solid #f2f2f2;  
    }  
      
    .zebra tbody tr:nth-child(even) {  
    background: #f5f5f5;  
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
    }  
      
    .zebra th {  
    text-align: left;  
    text-shadow: 0 1px 0 rgba(255,255,255,.5);  
    border-bottom: 1px solid #ccc;  
    background-color: #eee;  
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));  
    background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);  
    background-image: -moz-linear-gradient(top, #f5f5f5, #eee);  
    background-image: -ms-linear-gradient(top, #f5f5f5, #eee);  
    background-image: -o-linear-gradient(top, #f5f5f5, #eee);  
    background-image: linear-gradient(top, #f5f5f5, #eee);  
    }  
      
    .zebra th:first-child {  
    -moz-border-radius: 6px 0 0 0;  
    -webkit-border-radius: 6px 0 0 0;  
    border-radius: 6px 0 0 0;  
    }  
      
    .zebra th:last-child {  
    -moz-border-radius: 0 6px 0 0;  
    -webkit-border-radius: 0 6px 0 0;  
    border-radius: 0 6px 0 0;  
    }  
      
    .zebra th:only-child{  
    -moz-border-radius: 6px 6px 0 0;  
    -webkit-border-radius: 6px 6px 0 0;  
    border-radius: 6px 6px 0 0;  
    }  
      
    .zebra tfoot td {  
    border-bottom: 0;  
    border-top: 1px solid #fff;  
    background-color: #f1f1f1;  
    }  
      
    .zebra tfoot td:first-child {  
    -moz-border-radius: 0 0 0 6px;  
    -webkit-border-radius: 0 0 0 6px;  
    border-radius: 0 0 0 6px;  
    }  
      
    .zebra tfoot td:last-child {  
    -moz-border-radius: 0 0 6px 0;  
    -webkit-border-radius: 0 0 6px 0;  
    border-radius: 0 0 6px 0;  
    }  
      
    .zebra tfoot td:only-child{  
    -moz-border-radius: 0 0 6px 6px;  
    -webkit-border-radius: 0 0 6px 6px  
    border-radius: 0 0 6px 6px  
    }  
      
    </style>  
 </head>

 <body>
      <h2>Highlighted rows, borders</h2>  
    <table class="bordered">  
    <thead>  
      
    <tr>  
    <th>#</th>  
    <th>IMDB Top 10 Movies</th>  
    <th>Year</th>  
    </tr>  
    </thead>  
    <tr>  
    <td>1</td>  
    <td>The Shawshank Redemption</td>  
      
    <td>1994</td>  
    </tr>  
    <tr>  
    <td>2</td>  
    <td>The Godfather</td>  
    <td>1972</td>  
    </tr>  
    <tr>  
      
    <td>3</td>  
    <td>The Godfather: Part II</td>  
    <td>1974</td>  
    </tr>  
    <tr>  
    <td>4</td>  
    <td>The Good, the Bad and the Ugly</td>  
    <td>1966</td>  
      
    </tr>  
    <tr>  
    <td>5</td>  
    <td>Pulp Fiction</td>  
    <td>1994</td>  
    </tr>  
    <tr>  
    <td>6</td>  
    <td>12 Angry Men</td>  
      
    <td>1957</td>  
    </tr>  
    <tr>  
    <td>7</td>  
    <td>Schindler's List</td>  
    <td>1993</td>  
    </tr>  
    <tr>  
      
    <td>8</td>  
    <td>One Flew Over the Cuckoo's Nest</td>  
    <td>1975</td>  
    </tr>  
    <tr>  
    <td>9</td>  
    <td>The Dark Knight</td>  
      
    <td>2008</td>  
    </tr>  
    <tr>  
    <td>10</td>  
    <td>The Lord of the Rings: The Return of the King</td>  
    <td>2003</td>  
    </tr>  
      
    </table>  
      
    <br><br>  
      
    <h2>Zebra stripes, footer</h2>  
    <table class="zebra">  
    <thead>  
    <tr>  
    <th>#</th>  
    <th>IMDB Top 10 Movies</th>  
    <th>Year</th>  
      
    </tr>  
    </thead>  
    <tfoot>  
    <tr>  
    <td> </td>  
    <td></td>  
    <td></td>  
    </tr>  
    </tfoot>  
    <tr>  
      
    <td>1</td>  
    <td>The Shawshank Redemption</td>  
    <td>1994</td>  
    </tr>  
    <tr>  
    <td>2</td>  
    <td>The Godfather</td>  
    <td>1972</td>  
      
    </tr>  
    <tr>  
    <td>3</td>  
    <td>The Godfather: Part II</td>  
    <td>1974</td>  
    </tr>  
    <tr>  
    <td>4</td>  
    <td>The Good, the Bad and the Ugly</td>  
      
    <td>1966</td>  
    </tr>  
    <tr>  
    <td>5</td>  
    <td>Pulp Fiction</td>  
    <td>1994</td>  
    </tr>  
      
    <tr>  
    <td>6</td>  
    <td>12 Angry Men</td>  
    <td>1957</td>  
    </tr>  
    <tr>  
    <td>7</td>  
    <td>Schindler's List</td>  
      
    <td>1993</td>  
    </tr>  
    <tr>  
    <td>8</td>  
    <td>One Flew Over the Cuckoo's Nest</td>  
    <td>1975</td>  
    </tr>  
    <tr>  
      
    <td>9</td>  
    <td>The Dark Knight</td>  
    <td>2008</td>  
    </tr>  
    <tr>  
    <td>10</td>  
    <td>The Lord of the Rings: The Return of the King</td>  
      
    <td>2003</td>  
    </tr>  
    </table>  
 </body>
</html>

时间： 2024-07-30 09:03:00

html5 css3构造的漂亮表格的相关文章

献给网页设计师的HTML5/CSS3/JS便捷工具

  是时候为网页设计师的来一组便捷的辅助工具了.日新月异的网页技术革新催生了大量的设计与开发工具,HTML5/CSS3几乎成了设网页设计师的必修课,而强大的JS也为网页提供了更多的可能性.尤其是HTML5,作为一门极为有用且实用的标记语言,它赋予网页设计师创造更优秀网页的可能. 这也是为什么,身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具,这些全新的库.框架.插件和技术能让你的网页如虎添翼. HTML5使得设计师和开发者在各个不同领域都比之前更强大了.快速,漂亮,安全,响应式,这些特性

HTML5 CSS3简明教程

Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式.事实上,我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代.专有协议和那些充满闪动.滚动和闪烁的丑陋网页. 虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义

jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码_jquery

本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

12款非常精致的免费 HTML5 &amp; CSS3 网站模板

01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder Folder是一款响应式 HTML5 网站模板,能够自适应各种设备和浏览器尺寸.适合用于创意展示和企业网站项目. 演示  下载 03. Web lab 这款 HTML5 & CSS3 免费网站模板适合范围很广,特别适合用于企业网站.设计和开发的相关网站等等. 演示  下载 04. Left Left

20个九月最新的HTML5/CSS3优秀网站

  今天来一组酷炫的HTML5 – CSS3 优秀网站,无论是网站主题(反战.捍卫人权.肯德基老爷爷的美好晚年等)还是动效视觉,都非常值得体验.周末休息下,来点轻松的吧 The Generations Relay 2014年是华沙起义70周年,华沙博物馆邀请了在那场战斗有代表性的12个组织参加这个"薪火相传"的活动,组织里的年轻人庄严宣誓,他们将承担起建造一个自由.爱.诚实.谦虚.友善.保护弱者.有责任感的世界这个任务. Nike – Geç Kendini 耐克2015年夏季的女装的

提高开发速度的HTML5/CSS3框架

Perkins是个HTML5/CSS3框架,能让设计师提高开发速度. 整个框架带有一个简单的模板,其中包含了大多数的HTML的标签样式,以及一些网页上常见的,如导航条.圆角等等.模板中元素的样式也设计得相当好看,此外还带有一套图标. 兼容性: 所有主流浏览器 网站: http://p.erkins.com/ 官方下载: http://code.google.com/p/perkins-less/downloads/list

HTML5/CSS3的开发框架：实用HTML5和CSS3框架

文章简介:所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架.可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分.看看最新的实用HTML5和CSS3框架吧! 所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架.可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分.看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1.HTML5b

提供超多HTML5+CSS3响应式网页模版免费下载的酷站

  今天介绍的HTML5 UP! 提供大量的HTML5 模版,而且这些模版都支持响应式网页设计 ,有了它我们就不用从无到有.从头到尾来打造一个网站,而是直接就现有的样版去做修改或调整,让建网站难度降低许多,也减少花费的时间和开支.来收! 因为自适应网页设计在开发上较为繁琐,一般很少免费提供下载的网站,但 HTML5 UP! 收录一系列共 28 种网页设计,通通都是 HTML5+CSS3 并有响应式设计 功能,网站采用的授权方式为 Creative Commons 姓名标示 3.0,也就是说你可以

10个便利的HTML5/CSS3框架

来源:GBin1.com 所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架.可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分. 看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1. HTML5boilerplate H5BP 带给你非常漂亮的文档,一个网站优化的编译脚本,还有一个自定义的boilerplate编译器.除此之外,我们还支持lighttd,Google App Engine和NodeJS以