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

 

 

按照WEB2.0风格,设计了几个表格样式,希望大家喜欢。

WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择。

如今使用介绍使用CSS样式表来控制、美化表格的方法。

 

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

美丽的表格样式(使用CSS样式表控制表格样式)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
美丽的表格样式(使用CSS样式表控制表格样式)
<html xmlns="http://www.w3.org/1999/xhtml">
美丽的表格样式(使用CSS样式表控制表格样式)
<head>
美丽的表格样式(使用CSS样式表控制表格样式)
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
美丽的表格样式(使用CSS样式表控制表格样式)
<title>精美的表格样式</title>
美丽的表格样式(使用CSS样式表控制表格样式)
<style type="text/css">
美丽的表格样式(使用CSS样式表控制表格样式)<!--
美丽的表格样式(使用CSS样式表控制表格样式)body,table
{
美丽的表格样式(使用CSS样式表控制表格样式)    font-size
:12px;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table
{
美丽的表格样式(使用CSS样式表控制表格样式)    table-layout
:fixed;
美丽的表格样式(使用CSS样式表控制表格样式)    empty-cells
:show; 
美丽的表格样式(使用CSS样式表控制表格样式)    border-collapse
: collapse;
美丽的表格样式(使用CSS样式表控制表格样式)    margin
:0 auto;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)td
{
美丽的表格样式(使用CSS样式表控制表格样式)    height
:20px;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)h1,h2,h3
{
美丽的表格样式(使用CSS样式表控制表格样式)    font-size
:12px;
美丽的表格样式(使用CSS样式表控制表格样式)    margin
:0;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式).title 
{ background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
美丽的表格样式(使用CSS样式表控制表格样式)    .title h1 
{ line-height: 31px; text-align:center;  background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
美丽的表格样式(使用CSS样式表控制表格样式)        .title th, .title td 
{ border: 1px solid #CAD9EA; padding: 5px; }
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
/*这个是借鉴一个论坛的样式*/
美丽的表格样式(使用CSS样式表控制表格样式)table.t1
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #cad9ea;
美丽的表格样式(使用CSS样式表控制表格样式)    color
:#666;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t1 th 
{
美丽的表格样式(使用CSS样式表控制表格样式)    background-image
: url(th_bg1.gif);
美丽的表格样式(使用CSS样式表控制表格样式)    background-repeat
::repeat-x;
美丽的表格样式(使用CSS样式表控制表格样式)    height
:30px;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t1 td,table.t1 th
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #cad9ea;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0 1em 0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t1 tr.a1
{
美丽的表格样式(使用CSS样式表控制表格样式)    background-color
:#f5fafe;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)table.t2
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #9db3c5;
美丽的表格样式(使用CSS样式表控制表格样式)    color
:#666;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t2 th 
{
美丽的表格样式(使用CSS样式表控制表格样式)    background-image
: url(th_bg2.gif);
美丽的表格样式(使用CSS样式表控制表格样式)    background-repeat
::repeat-x;
美丽的表格样式(使用CSS样式表控制表格样式)    height
:30px;
美丽的表格样式(使用CSS样式表控制表格样式)    color
:#fff;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t2 td
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px dotted #cad9ea;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0 2px 0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t2 th
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #a7d1fd;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0 2px 0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t2 tr.a1
{
美丽的表格样式(使用CSS样式表控制表格样式)    background-color
:#e8f3fd;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)table.t3
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #fc58a6;
美丽的表格样式(使用CSS样式表控制表格样式)    color
:#720337;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t3 th 
{
美丽的表格样式(使用CSS样式表控制表格样式)    background-image
: url(th_bg3.gif);
美丽的表格样式(使用CSS样式表控制表格样式)    background-repeat
::repeat-x;
美丽的表格样式(使用CSS样式表控制表格样式)    height
:30px;
美丽的表格样式(使用CSS样式表控制表格样式)    color
:#35031b;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t3 td
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px dashed #feb8d9;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0 1.5em 0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t3 th
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #b9f9dc;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0 2px 0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)table.t3 tr.a1
{
美丽的表格样式(使用CSS样式表控制表格样式)    background-color
:#fbd8e8;
美丽的表格样式(使用CSS样式表控制表格样式)
}

美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)-->
美丽的表格样式(使用CSS样式表控制表格样式)
</style>
美丽的表格样式(使用CSS样式表控制表格样式)
<script type="text/javascript">
美丽的表格样式(使用CSS样式表控制表格样式)    
function ApplyStyle(s){
美丽的表格样式(使用CSS样式表控制表格样式)        document.getElementById(
"mytab").className=s.innerText;
美丽的表格样式(使用CSS样式表控制表格样式)    }

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

能够到我的网络硬盘下载源代码:http://wallimn.ys168.com

美丽的表格样式(使用CSS样式表控制表格样式),布布扣,bubuko.com

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

上一篇:★android开发--ListView+Json+异步网络图片加载+滚动翻页的例子(图片能缓存,图片不错乱)


下一篇:ASP.NET中处理自定义错误的最佳方式