不同边框的表格样式以及代码

II.〆雪灬颜° 发表于 2011-11-30 15:43:20

本帖最后由 II.〆蝶儿° 于 2011-11-30 15:44 编辑 <br /><br /><TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#99ff66 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM: #99ff66 1px dashed; BORDER-LEFT: #99ff66 1px dashed; BORDER-COLLAPSE: collapse; BORDER-TOP: #99ff66 1px dashed; BORDER-RIGHT: #99ff66 1px dashed" border=1 borderColor=#000000 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM: #99ff66 2px dotted; BORDER-LEFT: #99ff66 2px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #99ff66 2px dotted; BORDER-RIGHT: #99ff66 2px dotted" border=2 borderColor=#000000 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<P> </P>
<TABLE border=3 borderColor=#99ff66 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM: #99ff66 10px groove; BORDER-LEFT: #99ff66 10px groove; BORDER-COLLAPSE: collapse; BORDER-TOP: #99ff66 10px groove; BORDER-RIGHT: #99ff66 10px groove" border=10 borderColor=#99ff66 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM: #99ff66 10px ridge; BORDER-LEFT: #99ff66 10px ridge; BORDER-COLLAPSE: collapse; BORDER-TOP: #99ff66 10px ridge; BORDER-RIGHT: #99ff66 10px ridge" border=10 borderColor=#99ff66 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM: #99ff66 10px inset; BORDER-LEFT: #99ff66 10px inset; BORDER-COLLAPSE: collapse; BORDER-TOP: #99ff66 10px inset; BORDER-RIGHT: #99ff66 10px inset" border=10 borderColor=#99ff66 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM: #99ff66 10px outset; BORDER-LEFT: #99ff66 10px outset; BORDER-COLLAPSE: collapse; BORDER-TOP: #99ff66 10px outset; BORDER-RIGHT: #99ff66 10px outset" border=10 borderColor=#99ff66 cellPadding=1 width=250 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; BORDER-LEFT-STYLE: solid" border=2 cellSpacing=8 borderColor=#99ff66 cellPadding=2 width=250 bgColor=#ffffff align=center height=40>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: #ffffff 2px dashed; BORDER-LEFT: #99ff66 2px dashed; BACKGROUND: #99ff66; BORDER-TOP: #99ff66 2px dashed; BORDER-RIGHT: #99ff66 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-BOTTOM-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-TOP-STYLE: dashed; BORDER-LEFT-STYLE: dashed" border=2 cellSpacing=8 borderColor=#99ff66 cellPadding=2 width=250 bgColor=#ffffff align=center height=40>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: #99ff66 2px solid; BORDER-LEFT: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-TOP: #99ff66 2px solid; BORDER-RIGHT: #99ff66 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<TABLE style="BORDER-COLLAPSE: collapse" border=0 borderColor=#99ff66 cellPadding=1 width=250 bgColor=#fffbec align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

II.〆雪灬颜° 发表于 2011-11-30 15:45:41

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-RIGHT: #99ff66 1px dashed; BORDER-TOP: #99ff66 1px dashed; BORDER-LEFT: #99ff66 1px dashed; BORDER-BOTTOM: #99ff66 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>

<TABLE style="BORDER-RIGHT: #99FF66 2px dotted; BORDER-TOP: #99FF66 2px dotted; BORDER-LEFT: #99FF66 2px dotted; BORDER-BOTTOM: #99FF66 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD>
</TR></TBODY></TABLE>

<TABLE borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-RIGHT: #99FF66 10px groove; BORDER-TOP: #99FF66 10px groove; BORDER-LEFT: #99FF66 10px groove; BORDER-BOTTOM: #99FF66 10px groove; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-RIGHT: #99FF66 10px ridge; BORDER-TOP: #99FF66 10px ridge; BORDER-LEFT: #99FF66 10px ridge; BORDER-BOTTOM: #99FF66 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-RIGHT: #99FF66 10px inset; BORDER-TOP: #99FF66 10px inset; BORDER-LEFT: #99FF66 10px inset; BORDER-BOTTOM: #99FF66 10px inset; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-RIGHT: #99FF66 10px outset; BORDER-TOP: #99FF66 10px outset; BORDER-LEFT: #99FF66 10px outset; BORDER-BOTTOM: #99FF66 10px outset; BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#99FF66 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #99FF66 2px dashed; BORDER-TOP: #99FF662px dashed; BACKGROUND: #99FF66; BORDER-LEFT: #99FF66 2px dashed; BORDER-BOTTOM: #ffffff 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD>
</TR></TBODY></TABLE>

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#99ff66 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #99ff66 2px solid; BORDER-TOP: #99ff66 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #99ff66 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99ff66 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

附：表格常用属性border：表格的边框宽度。如border=1，表示表格边框的粗细为1个像素(默认值)，为0表示没有边框。
   cellspacing：表格中各单元格的间距。属性值为数字。当表格只有一个单元格时，则表示该单元格与表格边框的距离。
   cellpadding：单元格内容与单元格边框之间的距离，属性值是数字。
   width：表格的宽度。属性值为像素和百分比两种。
   height：表格的高度。取值方法同width。
   bgcolor：表格的背景颜色。属性值为各种颜色代码。
   background：表格的背景图案。属性值为有效的图片地址。
   bordercolor：表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
   bordercolorlight：亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
   bordercolordark：暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
   align：表格的对齐方式。属性值为left(左对齐，默认)、center(居中)以及right(右对齐)。
   colspan：定义合并表格的列数。属性值是数字。
   rowspan定义合并表格的行数，属性值是数字。

II.〆小雨滴° 发表于 2011-11-30 15:47:32

{:eb500:}{:eb511:}适合我这样的比较懒又比较笨的人

莫筱发表于 2011-11-30 15:47:37

{:eb511:}{:eb511:}亲爱的你真给力！！！~~~

晓清发表于 2011-11-30 15:54:16

很给力适合我

II.〆花花° 发表于 2011-11-30 15:55:44

{:eb500:}有了我家蝶儿，我以后可以都偷懒了

张洋洋哦 发表于 2011-11-30 15:59:39

有了蝶儿我以后发帖子不在东找西找了就找蝶儿{:70_306:}

Lo、、Ro、、 发表于 2011-11-30 16:08:43

{:2_267:}很适合俄蝶儿辛苦了

再见，夏日阳光 发表于 2011-11-30 17:18:26

这个很有帮助噢。可以直接拿来用了。

云晓月 发表于 2011-11-30 17:50:55

蝶儿这样的帖子，代码弄隐藏哦

挥霍的年代。 发表于 2011-11-30 23:11:31

{:70_287:}这个不错，。帮助很大哦。

Mimiko 发表于 2011-12-1 00:12:25

{:2_260:}{:2_260:}{:2_260:}啊我喜欢虚线那个!

hsq3501470 发表于 2011-12-1 02:29:22

{:2_273:}这个发帖的时候倒可以用

页: [1]

三毛钱's Archiver

不同边框的表格样式以及代码