几个漂亮的表格样式

来源：互联网发布：淘宝店铺公司介绍编辑：程序博客网时间：2024/05/01 05:46

漂亮的表格样式(使用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:;" onclick="ApplyStyle(this)">t1</a> <a href="javascript:;" mce_href="javascript:;" onclick="ApplyStyle(this)">t2</a> <a href="javascript:;" mce_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>

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.一个漂亮的表格样式_嘻嘻哈哈_百度空间

一个漂亮的表格样式

代码：

4。黑色系列