<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">1 </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">2 </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">3 </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">4 </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">5 </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">6 </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">7 </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">8 </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">9 </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">10 </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">11 </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">12 </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">13 </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">14 </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">15 </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在表格边框上的美学应用CSS在表格边框上的美学应用
使用css样式，来美化表格，对表格处理的各种效果
css图片外边框效果实现 css图片外边框效果实现
我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。 有关表格边框的css...
个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果。
CSS控制表格边框 CSS控制表格样式 除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。 本节将从边框、边距和宽高三个方面，详细讲解CSS...
美化好的表格可以使用在网站信息
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
用css实现边框流动光线效果.........................................................................................
这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。
系统默认的滚动条太死板了，想要自定义css 滚动条 自定义滚动条 美化滚动条
CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用，几乎都是标签样式
html5，css,javascript结合运用，用于表格编辑及美化，适用后台管理系统
CSS表格边框50多种精美标签样式(边框也精彩)
纯CSS3表格美化特效
css3条纹边框效果
纯CSS实现图片美化带边框3D效果鼠标经过旋转堆叠特效动画代码下载。
3.边框效果：双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果：反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果：横向文字覆盖、纵向文字覆盖 6.聚集效果：普通聚集、猫耳朵、熊耳朵等等更多样式 7.波纹效果：...