几个漂亮的表格样式

最新推荐文章于 2024-07-12 11:17:24 发布

xshf12345

最新推荐文章于 2024-07-12 11:17:24 发布

阅读量1.5w

点赞数

文章标签： border javascript class xhtml table url

本文链接：https://blog.csdn.net/xshf12345/article/details/5641726

版权

漂亮的表格样式(使用CSS样式表控制表格样式) - 隔壁老王的博客 - CSDN博客

依照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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">... </mce:script> </head> <body> <div class="title"> <h1>大家好，CSS与表格的结合示例</h1> <table><tr><td> 点击链接切换样式：<a href="javascript:;" mce_href="javascript:;" οnclick="ApplyStyle(this)">t1</a> <a href="javascript:;" mce_href="javascript:;" οnclick="ApplyStyle(this)">t2</a> <a href="javascript:;" mce_href="javascript:;" οnclick="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>

2.groove边框

代码如下：

body{ background: #ddd; font-family:Calibri; color:#444; } table{ border-collapse:collapse; } th,td{ border: 2px groove #fff; text-shadow: 0px -1px #bbb,1px 1px #fff; } td:active{ border-style: solid; border-color: #aaa #fff #fff #aaa; }

3.一个漂亮的表格样式_嘻嘻哈哈_百度空间

一个漂亮的表格样式