.
表格邊框代碼應(yīng)用(1)
表格應(yīng)用實例(一)
一、單列表格:
代碼:
<TABLE borderColor=#33ccff cellSpacing=5 cellPadding=10
width=600 align=center border=3><TBODY>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" 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="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" 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="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="25%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" 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="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD width="50%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="50%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" 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="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD width="33.33%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="33.33%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD width="33.33%">
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
<TR><TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD>
<TD>
<A href="鏈接網(wǎng)址" target=_blank>文字</A></TD></TR>
</TBODY></TABLE>
效果:
文字文字文字文字文字文字文字表格邊框代碼應(yīng)用(5)
表格應(yīng)用實例(二)
當(dāng)表格中只有一個單元格時,它實際就是一個日志邊框。
一、顏色邊框:
1、單色邊框、透明背景、固定寬度的邊框:
代碼:
<TABLE borderColor=#0080ff cellSpacing=5 cellPadding=5
width=600 align=center border=10>
<TR><TD>日志內(nèi)容</TD></TR>
</TABLE>
效果:
日志內(nèi)容說明:邊框的高度可隨日志內(nèi)容進行調(diào)整。
2、陰影邊框、顏色背景、固定寬度的邊框:
代碼:
<TABLE cellSpacing=5 borderColorDark=#004B97
cellPadding=5 width=600 align=center
bgColor=#660000 borderColorLight=#62B0FF border=10>
<TR><TD>日志內(nèi)容</TD></TR>
</TABLE>
效果:
日志內(nèi)容3、雙色邊框、顏色背景、固定寬度的邊框:
代碼:
<TABLE borderColor=#0080ff cellSpacing=5 cellPadding=5
width=600 align=center bgColor=#660000 border=10>
<TR><TD borderColor=#ffffff>日志內(nèi)容</TD></TR>
</TABLE>
效果:
日志內(nèi)容說明:<TD>標(biāo)簽中多了一個“borderColor=#ffffff”,表示內(nèi)框線顏色。
width=100%,表示邊框的寬度為最大化。
二、圖片邊框:
1、圖片邊框、顏色背景、固定寬度的邊框:
代碼:
<TABLE cellSpacing=15 width=600
background=圖片地址><TR><TD>
<TABLE width=600 align=center bgColor=#660000>
<TR><TD>日志內(nèi)容</TD></TR>
</TABLE></TD></TR></TABLE>
效果:
日志內(nèi)容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>日志內(nèi)容</TD></TR>
</TABLE></TD></TR></TABLE>
效果:
日志內(nèi)容說明: 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=5
width="100%" align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=3 cellPadding=5
width="100%" align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=10 cellPadding=5
width="100%" align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#0080ff cellSpacing=3 cellPadding=1
width="100%" align=center background=圖片地址 border=1>
<TR><TD>日志內(nèi)容</TD></TR>
</TABLE></TD></TR></TABLE></TD></TR>
</TABLE></TD></TR></TABLE></TD></TR>
</TABLE>
效果:
日志內(nèi)容表格邊框代碼應(yīng)用(6)
表格應(yīng)用實例(三)
代 碼
<TABLE borderColor=#ff00000 cellSpacing=5 cellPadding=1
width=650 align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#000000 cellSpacing=20 cellPadding=1
width="100%" align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#ff00000 cellSpacing=5 cellPadding=1
width="100%" align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#000000 cellSpacing=10 cellPadding=1
width="100%" align=center background=圖片地址 border=1>
<TR><TD>
<TABLE borderColor=#ff00000 cellSpacing=5 cellPadding=1
width="100%" align=center background=圖片地址 border=1>
<TR><TD>日志內(nèi)容</TD></TR>
</TABLE></TD></TR></TABLE></TD></TR>
</TABLE></TD></TR></TABLE></TD></TR>
</TABLE>
說明:
更換代碼中的圖片地址,或相關(guān)屬性的數(shù)值,
可得到風(fēng)格、色彩各異的日志邊框。
表格應(yīng)用實例(四)
文 字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文 字說明:
日志邊框和表格分別以同樣的圖片作背景(黑色星空)。
表格應(yīng)用實例(五)
文 字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文 字舞夜浪花美化教程!