大家好，又见面了，我是全栈君，祝每个程序员都可以多学几门语言。
按照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
>
<
style
type
=”text/css”
>
<!–
body,table{ font-size:12px;
}table{ table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto;}td{ height:20px;}h1,h2,h3{ font-size:12px; margin:0; padding:0;}.title { background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; } .title h1 { line-height: 31px; text-align:center; background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; } .title th, .title td { border: 1px solid #CAD9EA; padding: 5px; }/*这个是借鉴一个论坛的样式*/table.t1{ border:1px solid #cad9ea; color:#666;}table.t1 th { background-image: url(th_bg1.gif); background-repeat::repeat-x; height:30px;}table.t1 td,table.t1 th{ border:1px solid #cad9ea; padding:0 1em 0;}table.t1 tr.a1{ background-color:#f5fafe;}table.t2{ border:1px solid #9db3c5; color:#666;}table.t2 th { background-image: url(th_bg2.gif); background-repeat::repeat-x; height:30px; color:#fff;}table.t2 td{ border:1px dotted #cad9ea; padding:0 2px 0;}table.t2 th{ border:1px solid #a7d1fd; padding:0 2px 0;}table.t2 tr.a1{ background-color:#e8f3fd;}table.t3{ border:1px solid #fc58a6; color:#720337;}table.t3 th { background-image: url(th_bg3.gif); background-repeat::repeat-x; height:30px; color:#35031b;}table.t3 td{ border:1px dashed #feb8d9; padding:0 1.5em 0;}table.t3 th{ border:1px solid #b9f9dc; padding:0 2px 0;}table.t3 tr.a1{ background-color:#fbd8e8;}
–></
style
>
<
script
type
=”text/javascript”
>
function ApplyStyle(s){ document.getElementById(“mytab“).className=s.innerText; }</
script
>
</
head
>
<
body
>
<
div
class
=”title”
>
<
h1
>
大家好，CSS与表格的结合演示样例
</
h1
>
<
table
><
tr
><
td
>
点击链接切换样式：<
a
href
=”javascript:;”
onclick
=”ApplyStyle(this)”
>
t1
</
a
>
<
a
href
=”javascript:;”
onclick
=”ApplyStyle(this)”
>
t2
</
a
>
<
a
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%”
>
</
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
>
能够到我的网络硬盘下载源代码：http://wallimn.ys168.com
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/118786.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...