序號(hào)樣式代碼 001
單實(shí)線邊框表格<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>單實(shí)線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
002
虛線邊框表格<TABLE style="BORDER-RIGHT: #333333 1px dashed; BORDER-TOP: #333333 1px dashed; BORDER-LEFT: #333333 1px dashed; BORDER-BOTTOM: #333333 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>
003
點(diǎn)線邊框表格<TABLE style="BORDER-RIGHT: #333333 2px dotted; BORDER-TOP: #333333 2px dotted; BORDER-LEFT: #333333 2px dotted; BORDER-BOTTOM: #333333 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>點(diǎn)線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
004
雙實(shí)線邊框表格<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>雙實(shí)線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
005
槽線邊框表格<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
006
脊線邊框表格
<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
007
內(nèi)凹效果邊框
<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>內(nèi)凹效果邊框</DIV></TD>
</TR></TBODY></TABLE>
008
外凸效果邊框
<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果邊框</DIV></TD>
</TR></TBODY></TABLE>
009
內(nèi)虛外實(shí)邊框
<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>內(nèi)虛外實(shí)邊框</DIV></TD>
</TR></TBODY></TABLE>
010
外虛內(nèi)實(shí)邊框
<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虛內(nèi)實(shí)邊框</DIV></TD>
</TR></TBODY></TABLE>
011
無(wú)邊框表格<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>無(wú)邊框表格</DIV></TD>
</TR></TBODY></TABLE>
二、不完整邊框的表格樣式不完整邊框的表格可分為11種:隱藏下邊框的表格、隱藏上邊框的表格、隱藏左邊框的表格、隱藏右邊框的表格、隱藏左右邊框的表格、隱藏上下邊框的表格、只顯示上邊框的表格、只顯示下邊框的表格、只顯示左邊框的表格、只顯示右邊框的表格、無(wú)邊框的表格。具體樣式及代碼如下:
序號(hào) 樣式 代碼 001
隱藏下邊框
<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none" height=40>隱藏下邊框</TD>
</TR></TBODY></TABLE>
002
隱藏上邊框
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none" height=40>隱藏上邊框</TD>
</TR></TBODY></TABLE>
003
隱藏左邊框
<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none" height=40>隱藏左邊框 </TD>
</TR></TBODY></TABLE>
004
隱藏右邊框 <TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none" height=40>隱藏右邊框 </TD>
</TR></TBODY></TABLE>
005
隱藏左右邊框
<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隱藏左右邊框 </TD>
</TR></TBODY></TABLE>
006
隱藏上下邊框<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隱藏上下邊框</TD>
</TR></TBODY></TABLE>
007
只顯示上邊框<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>
<TBODY>
<TR align=middle>
<TD height=40>只顯示上邊框</TD>
</TR></TBODY></TABLE>
008
只顯示下邊框
<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>
<TBODY>
<TR align=middle>
<TD height=40>只顯示下邊框</TD>
</TR></TBODY></TABLE>
009
只顯示左邊框<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>
<TBODY>
<TR align=middle>
<TD height=40>只顯示左邊框</TD>
</TR></TBODY></TABLE>
010
只顯示右邊框
<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs>
<TBODY>
<TR align=middle>
<TD height=40>只顯示右邊框</TD>
</TR></TBODY></TABLE>
011
不顯示任何邊框<TABLE borderColor=#111111 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void>
<TBODY>
<TR align=middle>
<TD height=40>不顯示任何邊框</TD>
</TR></TBODY></TABLE>
三、不同結(jié)構(gòu)的表格樣式表格按其結(jié)構(gòu)不同可分為:?jiǎn)涡袉瘟斜砀?、一行多列表格、一列多行表格、多行多列表格、合并列的表格、合并行的表格、?fù)雜表格、隱藏橫向分隔線表格、隱藏縱向分隔線表格、隱藏縱橫分隔線表格等十種。具體樣式及代碼如下:
序號(hào)樣式代碼 001
單行單列<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD height=40>
<DIV align=center>單行單列</DIV></TD>
</TR></TBODY></TABLE>
002
一行多列
一行多列
一行多列
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
</TR></TBODY></TABLE>
003
一列多行
一列多行
一列多行
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR>
</TR></TBODY></TABLE>
004
多行多列多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD></TR></TR>
</TR></TBODY></TABLE>
005
合并列的表格合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD colSpan=3>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD></TR></TR>
</TR></TBODY></TABLE>
006
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100 rowSpan=3>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD></TR></TR>
</TR></TBODY></TABLE>
007
復(fù)雜表格復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
復(fù)雜表格
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=60>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD width=180 colSpan=3>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD width=60>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TR>
<TD rowSpan=4>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD rowSpan=3>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>
復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TR>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TR>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TR>
<TD>
<DIV align=center>復(fù)雜表格</DIV></TD>
<TD colSpan=3>
<DIV align=center>復(fù)雜表格</DIV></TD>
</TR></TR></TR></TR>
</TR></TBODY></TABLE>
008
隱藏 橫向 分隔線 隱藏 橫向 分隔線 隱藏 橫向 分隔線
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=cols width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隱藏</TD>
<TD width=100>橫向</TD>
<TD width=100>分隔線</TD>
<TR>
<TD>隱藏</TD>
<TD>橫向</TD>
<TD>分隔線</TD>
<TR>
<TD>隱藏</TD>
<TD>橫向</TD>
<TD>分隔線</TD></TR></TR>
</TR></TBODY></TABLE>
009
隱藏 縱向 分隔線 隱藏 縱向 分隔線 隱藏 縱向 分隔線
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=rows width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隱藏</TD>
<TD width=100>縱向</TD>
<TD width=100>分隔線</TD>
<TR>
<TD>隱藏</TD>
<TD>縱向</TD>
<TD>分隔線</TD>
<TR>
<TD>隱藏</TD>
<TD>縱向</TD>
<TD>分隔線</TD></TR></TR>
</TR></TBODY></TABLE>
010
隱藏 縱橫 分隔線 隱藏 縱橫 分隔線 隱藏 縱橫 分隔線
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=none width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隱藏</TD>
<TD width=100>縱橫</TD>
<TD width=100>分隔線</TD>
<TR>
<TD>隱藏</TD>
<TD>縱橫</TD>
<TD>分隔線</TD>
<TR>
<TD>隱藏</TD>
<TD>縱橫</TD>
<TD>分隔線</TD></TR></TR>
</TR></TBODY></TABLE>
四、帶標(biāo)題的表格樣式帶標(biāo)題的表格大致有四種:標(biāo)題位于表體外的表格、標(biāo)題位于表體內(nèi)的表格、標(biāo)題位于邊框上的表格、表中表效果表格。其中后兩種表格若改變其屬性(如邊框顏色、邊框樣式、加背景顏色等),則表格的邊框?qū)⒂蓤A角矩形變?yōu)橹苯蔷匦?。具體樣式及代碼如下:
序號(hào) 樣式 代碼 001
標(biāo)題
文本內(nèi)容——標(biāo)題位于表體外的表格<TABLE width=250 align=center border=0>
<CAPTION>標(biāo)題</CAPTION>
<TBODY>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本內(nèi)容——標(biāo)題位于表體外的表格</DIV></TD>
</TR></TBODY></TABLE>
002
標(biāo)題文本內(nèi)容——標(biāo)題位于表體內(nèi)的表格
<TABLE width=250 align=center border=0>
<TBODY>
<TR>
<TD bgColor=#999999>
<DIV align=center><FONT color=#ffffff><B>標(biāo)題</B></FONT></DIV>
</TD></TR>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本內(nèi)容——標(biāo)題位于表體內(nèi)的表格</DIV></TD>
</TR>
</TBODY></TABLE>
003
標(biāo)題 文本內(nèi)容——標(biāo)題位于邊框上的表格
<FIELDSET style="WIDTH: 250px" align=center><LEGEND>標(biāo)題</LEGEND>
<DIV align=center>文本內(nèi)容——標(biāo)題位于邊框上的表格</DIV>
<DIV align=center>
</DIV></FIELDSET>
004
表中表 文本內(nèi)容——表中表效果
<TABLE cellSpacing=0 cellPadding=0 width=250 align=center>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 250px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" align=center><LEGEND style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; BORDER-LEFT: #808080 1px solid; background-Color: #e1f8ff; BORDER-BOTTOM: #808080 1px solid"><FONT color=#000000>表中表</FONT> </LEGEND>
<P align=center>文本內(nèi)容——表中表效果</P></FIELDSET> </TD>
</TR></TBODY></TABLE>
附:表格常用屬性border:表格的邊框?qū)挾?。如border=1,表示表格邊框的粗細(xì)為1個(gè)像素(默認(rèn)值),為0表示沒有邊框。
cellspacing:表格中各單元格的間距。屬性值為數(shù)字。當(dāng)表格只有一個(gè)單元格時(shí),則表示該單元格與表格邊框的距離。
cellpadding:?jiǎn)卧駜?nèi)容與單元格邊框之間的距離,屬性值是數(shù)字。
width:表格的寬度。屬性值為像素和百分比兩種。
height:表格的高度。取值方法同width。
bgcolor:表格的背景顏色。屬性值為各種顏色代碼。
background:表格的背景圖案。屬性值為有效的圖片地址。
bordercolor:表格邊框的顏色。屬性值為各種顏色代碼(當(dāng)border值不為0時(shí)設(shè)置此值有效)。
bordercolorlight:亮邊框(表格的左邊和上邊框)顏色。屬性值為各種顏色代碼(當(dāng)border值不為0時(shí)設(shè)置此值有效)。
bordercolordark:暗邊框(表格的右邊和下邊框)顏色。屬性值為各種顏色代碼(當(dāng)border值不為0時(shí)設(shè)置此值有效)。
align:表格的對(duì)齊方式。屬性值為left(左對(duì)齊,默認(rèn))、center(居中)以及right(右對(duì)齊)。
colspan:定義合并表格的列數(shù)。屬性值是數(shù)字。
rowspan定義合并表格的行數(shù),屬性值是數(shù)字。
十分種學(xué)會(huì)做表格 友情鏈接的制作方法與代碼滾動(dòng)條框制作方法與代碼 十分鐘學(xué)會(huì)做邊框 日志圖文排列樣式與代碼 一分鐘建立自已的博客日?qǐng)?bào) 移動(dòng)文字全都匯圖框鏈接教你做特效文字代碼大全圖片特效代碼大全 一分鐘學(xué)會(huì)查找音樂(lè)地址 一分鐘學(xué)會(huì)查找日志地址幻燈片制作方法與代碼背景圖片素材匯總如何給日志做封面 圖片移動(dòng)跟我學(xué)彩色閃字教你做 (原創(chuàng))圖片加框DIY