1、只有一個單元格的表格
效果
內(nèi)容
代碼:
<TABLE style="WIDTH: 120px; HEIGHT: 28px; TEXT-ALIGN: left" borderColor=#00ff00 cellSpacing=8 cellPadding=10 align=center bgColor=#bbbab9 border=3><BR>
<TBODY>
<TR>
<TD><BR>
<P align=center><FONT color=#0000ff size=4><B>內(nèi)容</B></FONT></P></TD></TR></TBODY></TABLE></FONT>
表格的結(jié)構(gòu),從外到里依次是:邊框線、間距、單元格邊線、邊距與內(nèi)容。
2、幾行幾列的表格
代碼:
<TABLE style="TEXT-ALIGN: left; WIDTH: 500px; HEIGHT: 28px" border=3 cellSpacing=8 borderColor=#00ff00 cellPadding=10 bgColor=#bbbab9 align=center>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格1</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格2</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格3</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格4</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格5</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格6</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格7</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格8</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>單元格9</B></FONT></P></TD></TR></TBODY></TABLE>
效果 單元格1
單元格2
單元格3
單元格4
單元格5
單元格6
單元格7
單元格8
單元格9
多行多列的表格常用于制作鏈接文章與首頁模塊。用于制作鏈接文章:
制作多重表格
1、二層表格代碼:
舉例代碼:
<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE title=春天沒來制作 border=2 cellSpacing=10 borderColor=#000000 cellPadding=0 width=600 bgColor=#00aa00 align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>內(nèi)容處</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
效果圖
內(nèi)容處
(1)無論制作幾層的多重表格,只要在最里面的那一層表格標簽中設(shè)置寬度與高度即可,其它層表格的寬度與高度都可以省略。其它層表格的寬度與高度都會根據(jù)表格中設(shè)置的間距等屬性撐大的。
(2)當表格標簽中設(shè)置了背景圖片,又設(shè)置了背景顏色的時候,表格中顯示的是背景圖片。只有當背景圖片失效以后才會顯示出背景顏色。
2、三層表格代碼
舉例代碼:
<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天沒來制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>內(nèi)容處</FONT></P></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
效果圖
內(nèi)容處
三層以上的多重邊框,按照上面講解的方法制作即可。
三、行標簽中添加屬性
行標簽中可以添加背景圖片:style="BACKGROUND-IMAGE: url(
http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg);
行標簽中可以添加背景顏色(綠色)與標題:title=春天沒來制作 bgColor=#05e30c
四、列標簽中添加屬性
在表格的“列標簽”中,可以添加一些屬性屬值?!傲袠撕灐敝刑砑拥膶傩詫僦?,只在此單元格中起作用。如:<TD style="BACKGROUND-IMAGE: url(
五、表格的行合并與列合并
“行合并”的代碼為:rowSpan=2 。其中的2表示由此行向下合并的行數(shù)
“列合并”的代碼為:colSpan=2 。等好后的數(shù)字表示由此列向右合并的列數(shù)
舉例:行合并的代碼
<TABLE style="BORDER-BOTTOM-COLOR: #00a360; TEXT-ALIGN: left; BACKGROUND-COLOR: #f2daef; BORDER-TOP-COLOR: #00a360; WIDTH: 500px; HEIGHT: 250px; BORDER-RIGHT-COLOR: #00a360; BORDER-LEFT-COLOR: #00a360" border=5 cellSpacing=5 cellPadding=3 width=500>
<TBODY>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TRrowSpan=2 >
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR></TBODY></TABLE>
六、背景圖片的設(shè)置
在設(shè)置了背景圖片的表格標簽中,寬度與高度,既是表格的寬度與高度,也是背景圖片的寬度與高度
1)添加移動文字:代碼:
<TABLE style="POSITION: relative; WIDTH: 750px; TOP: 0px; LEFT: 0px" border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天沒來制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=750 background=http://image72.360doc.com/DownloadImg/2014/05/1407/41587415_1.jpg align=center height=562>
<TBODY>
<TR>
<TD>
<MARQUEE style="POSITION: absolute; HEIGHT: 210px; TOP: 65px; LEFT: 150px" direction=up width=550 scrollAmount=2 scrollDelay=10>
<P align=center><FONT style="FONT-SIZE: 32px" color=#00ff00><B>學習代碼<BR>制作網(wǎng)頁<BR>用我們晚年的余熱<BR>發(fā)射出暮年的光華<BR>與時俱進<BR>走在時代的前列</B> </FONT></P></MARQUEE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
(2)添加動畫圖片
代碼:
<TABLE style="POSITION: relative; WIDTH: 750px; TOP: 0px; LEFT: 0px" border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天沒來制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=750 background=http://image72.360doc.com/DownloadImg/2014/05/1407/41587415_1.jpg align=center height=562>
<TBODY>
<TR>
<TD><EMBED style="POSITION: absolute; HEIGHT: 500px; TOP: -80px; LEFT: 50px" height=500 type=application/x-shockwave-flash align=right width=700 src=http://www.cctv118.com/2010yh/chuntian/f/燕子.swf quality="high" wmode="transparent"> <EMBED style="POSITION: absolute; HEIGHT: 600px; TOP: -20px; LEFT: 50px" height=500 type=application/x-shockwave-flash align=right width=750 src=http://www3.6000y.com/toumingflash/swf500/woso7_flash_20.swf quality="high" wmode="transparent"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
七、多行一列的表格
代碼:
<DIV align=center>
<TABLE style="POSITION: relative; WIDTH: 740px; TOP: 0px; LEFT: 0px" border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天沒來制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG style="WIDTH: 650px; HEIGHT: 300px" title="" alt="" src="
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>內(nèi)容處</FONT></P></TD></TR>
<DIV align=center><EMBED style="Z-INDEX: 0" height=340 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=650 src=http://bbs8.zhxww.net/UploadFile2008/2013-4/20134271951244020.swf wmode="transparent" invokeurls="false" quality="high" allowscriptaccess="never" allownetworking="internal"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>