html5 css3构造的漂亮表格

最新推荐文章于 2022-11-27 11:08:05 发布
最新推荐文章于 2022-11-27 11:08:05 发布
阅读量233 收藏
点赞数
原文链接：http://www.cnblogs.com/ae6623/archive/2013/01/06/4416607.html
版权

<!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>


转载于:https://www.cnblogs.com/ae6623/archive/2013/01/06/4416607.html

diyu8056
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮图表html,这9个精美的HTML5图表应用，让你的网页专业精确
weixin_36108931的博客
06-04 1678
提及图表应用，用HTML5和jQuery制作的网页图表更加方便和使用，而且无论是功能还是外观，定制起来都比较灵活。本文就向大家分享9个经典华丽的HTML5图表应用，也许对你的前端开发会有帮助，一起来看看吧。1、超酷HTML5 Canvas图表应用Chart.js这是一款基于HTML5Canvas的图表应用Chart.js，它的功能非常强大，有很多图表类型，包括折线图、柱状图、饼图、放射图等，你可以...
html漂亮表格效果_制作HTML5的表格
weixin_39963819的博客
12-01 2982
使用HTML5制作表格，是特别容易的事情，下面介绍一下制作方法。1、HTML5表格的主要元素：HTML5的表格包括table、caption、tr、td、th五个主要元素：table元素：定义一个表格；caption元素：定义表格的标题；tr元素：定义表格的一行，tr是table row的缩写；td元素：定义表格单元，td是table data的缩写；th元素：定义表头，th是table head...
纯CSS3漂亮表格（圆角、渐变、多背景色）.rar
07-10
纯CSS3实现一款漂亮的表格效果，具有圆角、渐变、多背景色的特点，最初是在国外网站发现的，自己模拟出来了，不兼容IE8，在IE9/火狐/Chrome以及Safari下完美表现，具体效果请参见演示截图。
html5 css3 图表,9个经典华丽的html5图表应用
weixin_30579759的博客
06-04 297
1、超酷HTML5Canvas图表应用Chart.js今天我们要介绍一款基于HTML5Canvas的图表应用Chart.js，它的功能非常强大，有很多图表类型，包括折线图、柱状图、饼图、放射图等，你可以下载并将它们应用到自己的项目中。html5-canvas-chart-js柱形图圈饼图折线图饼图极面图雷达区域图源码下载2、HTML53D动画柱状图表这次我们要分享一款很酷的HTML53D图表应用，...
教你如何用原生css和html搭建一个好看的Table表格
抗争小青年的博客
11-27 7630
大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：或者是这样的：大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。
几款CSS3美化的表格样式
学习笔记
10-25 4530
几款CSS3美化的表格样式 table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collap
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
CSS3 +HTML5入门到精通
07-01
《HTML+5+从入门到精通》-中文学习教程
h5 css3移动端漂亮登录界面
04-10
h5 css3移动端漂亮登录界面,使用了vue.js,已经打包,响应式布局,自动适应不同设备.
漂亮的表格css+html
04-20
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！
html5图表后台模板
05-05
地图报表，基于Bootstrap3，ECharts的报表系统,界面美观地图报表，基于Bootstrap3，ECharts的报表系统,界面美观
sexy-table:漂亮HTML5表格不是表格
05-04
性感表 漂亮HTML5表格不是表格:) 这个项目是我将要参与的一个即将到来的商业项目中使用的一个概念。 我一直在寻找像这样的客户端组件： 我想要一个可排序，可过滤，可搜索和可分页的表。 我还遵循一个设计，该设计需要各种花哨的阴影，动画和其他CSS3好东西，这些东西不容易应用于传统HTML <table> 。 Dynatable最接近满足我的要求。 请参阅： : 但是我已经在使用客户端视图框架Transparency.js，而且我觉得Dynatable和Transparency之间有很多重叠。 参见： : 那么什么是SexyTable： 它是一个类似于客户端组件的表，并使用HTML，CSS和JS构建。 实际上，可以使用新的Web组件API对其进行重构。 但是，我需要IE8 +兼容性，并且认为Web组件对于我的商业项目来说太新了。 请参阅： ： < div class
HTML5图表案例，表格+饼图
12-11
js+HTML5，表格可与饼图交互,适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
css+div 闪闪发光的表格
08-24
css+div + js 十分动感的闪闪发光的表格
html5，静态页面用echarts快速做漂亮的图表
热门推荐
wuyt2008的专栏
09-13 2万+
最新任务，找个漂亮的图表插件给做大数据的用，他们做的太丑了。于是，发现有个echarts的，百度弄的图表插件吧。还很不错。 如果图表数据动态生成那没我事，这边要用来做静态页面。 首先，echarts的官网 http://echarts.baidu.com/ 点击“实例” http://echarts.baidu.com/examples.html
HTML5+CSS3 表格设计（Table）
Draco
07-22 1万+
CSS样式： 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 */ bord
HTML5 一款漂亮的表单
wyf
11-26 4166
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;HTML5+CSS3超酷表单效果&lt;/title&gt; &lt;style&gt; *: focus{outl
用html5和css3写一个表格
最新发布
06-08
好的，我可以为你提供一个简单的HTML5和CSS3表格示例： ```html <!DOCTYPE html> <html> <head> <title>HTML5 CSS3 Table Example</title> <style> table { border-collapse: collapse; width: 100%; } th { background-color: #f2f2f2; border: 1px solid #ddd; padding: 8px; text-align: left; } td { border: 1px solid #ddd; padding: 8px; text-align: left; } tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <h2>HTML5 CSS3 Table Example</h2> <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>30</td> </tr> <tr> <td>Jane</td> <td>Doe</td> <td>25</td> </tr> <tr> <td>Bob</td> <td>Smith</td> <td>45</td> </tr> </tbody> </table> </body> </html> ``` 这个表格包括了一个HTML5的文档结构，以及一个带有表头和表体的表格。CSS3样式被应用于表格，包括边框合并、单元格内边距、单元格对齐方式和斑马条纹效果。你可以将这个示例代码复制到一个HTML文件中并查看效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值