引用
3942思凤 的 【引用】 表格边框代码应用
.
表格边框代码应用(1)
表格应用实例(一)
一、单列表格:
代码:
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD></TR></TBODY></TABLE>
效果:
二、双列表格:
代码:
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR></TBODY></TABLE>
效果:
三、四列表格:
代码:
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR></TBODY></TABLE>
效果:
四、首行合并,以下两列:
代码:
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=2>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="链接网址" target=_blank>文字</A></TD>
<TD>
<A href="链接网址" target=_blank>文字</A></TD></TR></TBODY></TABLE>
效果:
五、首行合并,以下三列:
代码:
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD align=center colSpan=3>
<A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD width="33.33%"><A href="链接网址" target=_blank>文字</A></TD>
<TD width="33.33%"><A href="链接网址" target=_blank>文字</A></TD>
<TD width="33.33%"><A href="链接网址" target=_blank>文字</A></TD></TR>
<TR><TD><A href="链接网址" target=_blank>文字</A></TD>
<TD><A href="链接网址" target=_blank>文字</A></TD>
<TD><A href="链接网址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果:
表格边框代码应用(5)
表格应用实例(二)
当表格中只有一个单元格时,它实际就是一个日志边框。
一、颜色边框:
1、单色边框、透明背景、固定宽度的边框:
代码:
<TABLE borderColor=#0080ff cellSpacing=5 cellPadding=5
width=600 align=center border=10>
<TR><TD>日志内容</TD></TR>
</TABLE>
效果:
说明:边框的高度可随日志内容进行调整。
2、阴影边框、颜色背景、固定宽度的边框:
代码:
<TABLE cellSpacing=5 borderColorDark=#004B97
cellPadding=5 width=600 align=center
bgColor=#660000 borderColorLight=#62B0FF border=10>
<TR><TD>日志内容</TD></TR>
</TABLE>
效果:
3、双色边框、颜色背景、固定宽度的边框:
代码:
<TABLE borderColor=#0080ff cellSpacing=5 cellPadding=5
width=600 align=center bgColor=#660000 border=10>
<TR><TD borderColor=#ffffff>日志内容</TD></TR>
</TABLE>
效果:
说明:<TD>标签中多了一个“borderColor=#ffffff”,表示内框线颜色。
width=100%,表示边框的宽度为最大化。
二、图片边框:
1、图片边框、颜色背景、固定宽度的边框:
代码:
<TABLE cellSpacing=15 width=600
background=图片地址><TR><TD><TABLE width=600 align=center bgColor=#660000>
<TR><TD>日志内容</TD></TR>
</TABLE></TD></TR></TABLE>
效果:
2、单层图片边框、颜色细框、颜色背景、最大化宽度的边框:
代码:
<TABLE borderColor=#0080ff cellSpacing=15 width="100%"
background=图片地址 border=2><TR><TD><TABLE borderColor=#0080ff width="100%" align=center
bgColor=#660000 border=2>
<TR><TD>日志内容</TD></TR>
</TABLE></TD></TR></TABLE>
效果:
说明: width=100%,表示边框的宽度为最大化。
3、多层图片边框、颜色细框、图片背景、固定宽度的边框:
代码:
<TABLE borderColor=#0080ff cellSpacing=3 cellPadding=5
width=600 align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=30 cellPadding=5width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=3 cellPadding=5width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=10 cellPadding=5width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=3 cellPadding=1width="100%" align=center background=图片地址 border=1>
<TR><TD>日志内容</TD></TR></TABLE></TD></TR></TABLE></TD></TR>
</TABLE></TD></TR></TABLE></TD></TR>
</TABLE>
效果:
表格边框代码应用(6)
表格应用实例(三)
代 码
<TABLE borderColor=#ff00000 cellSpacing=5 cellPadding=1
width=650 align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#000000 cellSpacing=20 cellPadding=1width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#ff00000 cellSpacing=5 cellPadding=1width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#000000 cellSpacing=10 cellPadding=1width="100%" align=center background=图片地址 border=1>
<TR><TD>
<TABLE borderColor=#ff00000 cellSpacing=5 cellPadding=1width="100%" align=center background=图片地址 border=1>
<TR><TD>日志内容</TD></TR></TABLE></TD></TR></TABLE></TD></TR>
</TABLE></TD></TR></TABLE></TD></TR>
</TABLE>
说明:
更换代码中的图片地址,或相关属性的数值,
可得到风格、色彩各异的日志边框。
表格应用实例(四)
文 字
说明:
日志边框和表格分别以同样的图片作背景(黑色星空)。
表格应用实例(五)
文 字
周三博博客美化教程!
评论