CSS美化表格边框汇总与效果
教程: CSS修饰表格
代码:
<
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 >
< 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 >
效果:
1 | ||
2 | ||
3 | ||
4 | ||
5 | ||
6 | ||
7 | ||
8 | ||
9 | ||
10 | ||
11 | ||
|
|
14 | ||
|
|
|
|||
|
|
|
|||
|
|
|