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

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

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

 

 

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

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

如今使用介绍使用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样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式)

<
style 
type
=”text/css”
>


美丽的表格样式(使用CSS样式表控制表格样式)<!–
美丽的表格样式(使用CSS样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式)body,table
{
美丽的表格样式(使用CSS样式表控制表格样式)    font-size
:12px;
美丽的表格样式(使用CSS样式表控制表格样式)
}

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

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

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

美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式).title 
{ background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
美丽的表格样式(使用CSS样式表控制表格样式)美丽的表格样式(使用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样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式)        .title th, .title td 
{ border: 1px solid #CAD9EA; padding: 5px; }
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)
美丽的表格样式(使用CSS样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式)
/*这个是借鉴一个论坛的样式*/
美丽的表格样式(使用CSS样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式)table.t1
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px solid #cad9ea;
美丽的表格样式(使用CSS样式表控制表格样式)    color
:#666;
美丽的表格样式(使用CSS样式表控制表格样式)
}

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

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

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

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

美丽的表格样式(使用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样式表控制表格样式)美丽的表格样式(使用CSS样式表控制表格样式)table.t2 td
{
美丽的表格样式(使用CSS样式表控制表格样式)    border
:1px dotted #cad9ea;
美丽的表格样式(使用CSS样式表控制表格样式)    padding
:0 2px 0;
美丽的表格样式(使用CSS样式表控制表格样式)
}

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

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

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

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

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

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

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

</
style
>

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

<
script 
type
=”text/javascript”
>


美丽的表格样式(使用CSS样式表控制表格样式)美丽的表格样式(使用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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118786.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号