| 1 | ||
| 2 | ||
| 3 | ||
| 4 | ||
| 5 | ||
| 6 | ||
| 7 | ||
| 8 | ||
| 9 | ||
| 10 | ||
| 11 | ||
|
|
| 14 | ||
|
|
|
|||
|
|
|
|
|||
|
|
|
|
CSS美化表格边框汇总与效果(转载)
程序员文章站
2022-06-09 15:34:32
...
<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>
效果：