用css美化表格边框-星雨小站-www.xyu01.com欢迎您

今天是：

首页

文章

下载

小说

幽默

QQ家园

小店

FLASH

汽车

您现在的位置：星雨小站 >> 文章 >> 电脑技术 >> 网页制作 >> CSS >> 文章正文

用户登录

新用户注册

[组图]用css美化表格边框

热 ★★★★★

用css美化表格边框

作者：touch8 文章来源：天极网设计在线点击数：更新时间：2004-12-3 10:21:12

前面我们在《有关表格边框的css语法整理》中了解了有关表格的一些CSS语法，现在我们来看看怎样巧妙运用这些语法美化表格。
　　注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。

　　例一：1px表格

　　
　　很多人热衷于制作1px表格，于是发明了各式各样的方法，用css做起来可就灵活的多。如果要制作一个1x1的1px表格只要简单定义一下边框值就可以了。我们首先用Dreamweaver插入一个1x1表格，宽度为50，然后在该表格table或者td中定义border:1 solid teal,所做的表格的效果如下：

　　但是要制作一个非1x1的表格（如2x2）就稍微麻烦些，因为如果直接定义td样式border:1 solid teal ，则显示的效果如下：

　　你会发现表格外框为1px，而里面则变成了2px了，这是由于叠加的原因。为了解决这么问题我们可以这样做：
　　首先为td定义样式：border:#cc0000 solid;border-width:0 1 1 0,这样表格表现为：

　　然后再为table定义样式:border:#cc0000 solid;border-width:1 0 0 1,这样就可做作成一个完整的1px表格了。

　　例二：粗边框的1px表格

　　此表格的内格线为1px而外边框为3px，有了例一的基础做起来就不难了，只要修改border-width值就行了。
　　对table所使用的样式的代码是：border:blue solid;border-width:3 2 2 3
　　对td所使用的样式的代码是：border:blue solid;border-width:0 1 1 0

　　例三：虚线框表格

　　做法和例一类似，border-style从solid改为dashed。
　　对table所使用的样式的代码是：border:black dashed;border-width:1 0 0 1
　　对td所使用的样式的代码是：border:black dashed;border-width:0 1 1 0

　　例四：点线边框表格

　　注意点线（dotted）的最小象素为2。
　　对table所使用的样式的代码是：border:green dotted ;border-width:2 0 0 2
　　对td所使用的样式的代码是：border:green dotted;border-width:0 2 2 0

　　例五：双线边框表格

　　注意双线（double）的最小象素为3。
　　对table所使用的样式的代码是：border:teal 4 double
　　对td所使用的样式的代码是：border:teal 1 solid

　　例六：outset外框表格

　　对table所使用的样式的代码是：border: 3 outset
　　对td所使用的样式的代码是：border: 1 solid

　　例七：inset外框表格

　　对table所使用的样式的代码是：border: 3 inset
　　对td所使用的样式的代码是：border: 1 solid

　　例八：ridge外框表格

　　
　　对table所使用的样式的代码是：border:#ee0000 3 ridge
　　对td所使用的样式的代码是：border: 1 solid

例九：综合使用一

　　
　　这个表格的外框采用的是脊线，内单元格边框是槽线，注意表格插入时cellspacing设为1了。

　　对table所使用的样式的代码是：border:skyblue 4 ridge
　　对td所使用的样式的代码是：border: navy 1 groove

　　例十：综合使用二

　　
　　别以为这是九个表格，其实他们是一个表格中的九个单元格，由于表格外边框为0，所以你看不到罢了。
　　只需对td使用样式：border:maroon 3 double，另外别忘了把表格的cellspacing设为1哦。

　　例十一：综合使用三

　　
　　此表格的上下左右边框采用了不同的样式，你可以根据喜好自行更改。
对table所使用的样式的代码是：border:purple 4 ;border-style:dashed double
对td所使用的样式的代码是：border:1 solid

　　例十二：综合使用四

　　
　　这是一个双线边框的1px表格，和例五比较起来要显得精巧，具体做法是这样的:
　　1.先做一个1x1的1px表格，并将cellspacing设为1；
　　2.再做一个3x3的1px表格，将width和height均设为100%；
　　3.将后做的表格插入先前做的表格中即可。

　　例十三：背景边框一：

　　
　　利用改变cellspacing的值可以把背景做成边框，上面的表格的制作方法是：
　　1.首先做一个1x1的表格，并设置好背景，将cellspace的值设为3；

　　2.再做一个3x3的1px表格，width和height均设为100%；
　　3.将后做的表格插入先前做的表格中即可。
　　如果你采用一幅会变色的gif动画，那么表格的边框就会自动连续改变颜色。

　　例十四：背景边框二

　　这个表格的制作方法和前面一个类似，你肯定能研究出来！

　　例十五：3D边框表格

　　
　　这是一个具有3D边框效果的表格，做起来有点窍门。
　　我们先来学做1x1的：
　　第一步：
　　建立两个样式如下：
.out{border-width:1px;border-style:solid;border-color:#dddddd #777777 #777777 #dddddd}
.in{border-width:1px;border-style:solid;border-color:#777777 #dddddd #dddddd #777777;background:#ffcccc}
　　第二步：
　　建立一个1x1的表格，高和宽均为100，cellspacing设为1，如下所示：

　　第三步：
　　对整个表格（即table标签）采用out样式，而单元格（即td标签）采用in样式。现在存盘看看效果吧，是不是和下面的一样？

　　
　　学会了1x1的3D边框的表格的制作，要做出本例的效果就不难了，读者不妨自己摸索一下。

　　小结

　　前面我们通过举例讲述了一些用css美化表格边框的方法，您可以尝试不同的组合，从而做出更漂亮的表格！为了方便你学习，这里为你提供了实例下载以及各种效果表格的全部代码，您可以将代码复制到写字板生成一个txt文件，然后将其扩展名改为htm，这样就可以用ie直接打开了。

　　代码如下：

<html>
<head>
<title>用css美化表格边框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.table1{border:#000000 dashed;border-width:1 0 0 1}
.td1{border:#000000 dashed;border-width:0 1 1 0}
.table2{border:#cc0000 solid;border-width:1 0 0 1;background:#ffffff}
.td2{border:#cc0000 solid;border-width:0 1 1 0}
.table3{border:green dotted;border-width:2 0 0 2}
.td3{border:green dotted;border-width:0 2 2 0}
.table4{border:blue solid;border-width:2 1 1 2}
.td4{border:blue solid;border-width:0 1 1 0}
.table5{border:teal 4 double}
.td5{border:teal 1 solid }
.table6{border:3 outset}
.td6{border: 1 solid}
.table7{border:3 inset}
.td7{border:1 solid}
.table8{border:#ee0000 3 ridge}
.td8{border:1 solid}
.table9{border: 4 skyblue ridge}
.td9{border:1 navy groove ;background:#ffffff}
.td10{border:maroon 3 double}
.table11{border:purple 4 ;border-style:dashed double}
.td11{border:1 solid}
.out{border-width:1;border-style:solid;border-color:#cccccc #333333 #333333 #cccccc}
.in{border-width:1;border-style:solid;border-color:#333333 #cccccc #cccccc #333333;background:#ffcccc}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table1">
<tr >
<td class=td1> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
<tr>
<td class="td1"> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
<tr>
<td class="td1"> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr >
<td class="td2"s> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table3">
<tr >
<td class="td3"s> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
<tr>
<td class="td3"> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
<tr>
<td class="td3"> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table4">
<tr >
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
<tr>
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
<tr>
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table5">
<tr >
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
<tr>
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
<tr>
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table6">
<tr >
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
<tr>
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
<tr>
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table7">
<tr >
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
<tr>
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
<tr>
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table8">
<tr >
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
<tr>
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
<tr>
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="1" cellpadding="0" border="0" class="table9">
<tr >
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="2" cellpadding="0" border="0">
<tr >
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
<tr>
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
<tr>
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table11">
<tr >
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
<tr>
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
<tr>
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="1" cellpadding="0" style="border:#cc0000 1 solid" >
<tr>
<td>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr >
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="3" cellpadding="0" style="border:#cc0000 1 solid" background="back.jpg">
<tr>
<td>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2" >
<tr >
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="2" cellpadding="0" border="0" style="border:1 navy solid" background="back.jpg">
<tr >
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="3" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

- - - -

在

中搜索与

用css美化表格边框

的相似内容

文章录入：admin 责任编辑：小雨

上一篇文章：有关表格边框的css语法整理

下一篇文章： CSS实用教程（三）

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

	[组图]无损硬盘数据调整…
	上线[问好,打招呼] QQ表…
	拜拜[再见,晚安,下线] …
	钱[钞票,大款] QQ表情
	[组图]应知应会的5个图…
	跟我学用“记事本”
	用好Windows自带的录音…
	来测试你的网速-比比看…

	文件夹加密过程中因误操…
	[组图]无损硬盘数据调整…
	能够安装多个杀毒软件吗…
	爱情专用系列 QQ表情
	用画图工具给图片添加文…
	老公增加零花钱的请示报…
	QQ搞笑表情(二) QQ表情
	悠嘻猴 QQ表情

去掉表格的辅助线
Dreamweaver MX 2004中…
让FLASH动画的北景透明
有关表格边框的css语法…
驯服不听话的网页表格
轻松随意设置网页水平…
为你的网页添加背景音…
网页编辑常用表现的实…
用PHP实现单击广告后才…
用ASP实现动态IP转向
畅通无阻传主页到您国…
多彩链接靓起来
做网页巧用Wingdings图…
自己的新闻系统纯HTML…
EXCEL表在网页制作中的…

（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

┋ 设为首页 ┋ 加入收藏 ┋ 联系站长 ┋ 友情链接 ┋ 版权申明 ┋ 广告服务 ┋音乐地图 ┋ 给我留言 ┋

本站Alaxa全球网站排名 (点击查看)(安装Alexa工具条，查看各大网站全球排名)