一 、學(xué)習(xí)
音畫貼里華麗的邊框是用表格來實現(xiàn)的。很多音畫貼的外圍邊框,正是一層套一層的表格做出來的,最常見的音畫貼所使用的表格,一般都是只有一行一列的矩形框,或是只有一列的多行表格。
要學(xué)做畫框,自然就先學(xué)畫表格
畫表格的語法實例:
<TABLE>
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
<TR>
<TD>第二行第一列</TD>
<TD>第二行第二列</TD>
</TR>
</TABLE>
這是簡單的一個兩行兩列的表格。
<TABLE>這個標(biāo)識符用來定義表格,要特別注意:這個標(biāo)識符一定要成對,而且嵌套表格時不能騎跨,否則將得不到預(yù)想的顯示的效果。<TABLE>標(biāo)識定義表格的開始,</TABLE>標(biāo)識定義表格的結(jié)束。表格的行和列,必須包含在<TABLE>和</TABLE>之間。
<TABLE>這個標(biāo)識符有很多屬性,利用其不同屬性可以設(shè)置表格的樣式,比如:表格是否有邊框,邊框線的粗細(xì),背景顏色、背景圖案、表格的寬度(象素),表格內(nèi)元素與表格邊框的距離,表格與外層容器之間的距離等等。
利用<TABLE></TABLE>標(biāo)簽告訴電腦我要做一個表格,利用<TR></TR>標(biāo)簽先做一個橫列
然后在橫列中利用幾組<TD></TD>標(biāo)簽再分出欄。
<TR>和</TR>定義表格的行,一對定義一行,可用多次重復(fù)定義任意數(shù)量的行。畫表格的時候,一定要先分“行”,再分“列”。
<TR>這個標(biāo)識符,也有屬性,但沒有必要使用。因為對表格單元格的樣式修飾,可以通過<TD>的屬性設(shè)置來實現(xiàn)。
<TD>和</TD>定義表格的列,一對定義一列,可用多次重復(fù)定義任意數(shù)量的列。表格分列的原則是,必須要在“行”里分列,通俗地理解就是表格外框包含行,行里包含列,最后畫成表格。表格的單元格是用來裝入我們要裝的東西的容器,而容器裝東西的位置就是<TD>與</TD>之間的位置。
實例一:在一個表格(矩形框)里顯示一張圖片。
<TABLE border=5 width=550 height=450 bgcolor=#00ffff>
<TR>
<TD><img src=http://bbs.21js.com/UpLoadFiles/2008-06/wm_2008626113945.jpg border=0 width=540 height=440></TD>
</TR>
</TABLE>
實例二:在一個表格(矩形框)里顯示一句文字。
<TABLE border=5 width=550 height=400 bgcolor=#00ffff>
<TR>
<TD>在這里寫上要顯示的文字如:江山西南論壇</TD>
</TR>
</TABLE>
相關(guān)屬性參數(shù)的設(shè)置
表格的一些設(shè)置:
1、設(shè)定表格底色,利用BGCOLOR="顏色碼"就行,該屬性用來定義表格的背景顏色。
顏色碼是表示一個16進制的數(shù)字(0-9的數(shù)字和a-e的字母),例如:feb034。fe代表紅色值,b0代表黃色值,34代表藍色值,三種不同的單元色,最后混合成一個復(fù)合色。使用16進制顏色代碼,一般要在顏色代碼前加上一個“#”號,例如:bgcolor=#ff00de。有些單色可以用英文單詞定義,red(紅色),blue(藍色),yellow(黃色),green(綠色),例如:bgcolor=yellow 。定義表格背景顏色最常用的語法是bgcolor=#000dea
例如:<TABLE border=1 width=600 bgcolor=#00ffff>
如:
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>文字</TD><TD>文字</TD></TR>
</TABLE>
2、表格可以用圖片來作背景
只要將BACKGROUND="圖片地址"加到表格中就行,將BACKGROUND="圖片地址"加在<TD>中
3、表格的寬度和高度確定
width=寬度,(寬度代表任意一個數(shù)值,最大值不應(yīng)超過網(wǎng)頁寬度的最大象素)該屬性用來定義表格的寬度。定義表格的高度可以使用height=高度,原理一樣。如果想定義一個寬度600象素的表格
例如下:
<TABLE border=1 width=600>
表格線的一些設(shè)置:
1、表格框線設(shè)定,設(shè)定表格粗細(xì),利用BORDER="粗細(xì)值"就行。
該屬性用來定義表格的邊框線粗細(xì),粗細(xì)值為零表示該表格沒有邊框(或不顯示邊框)
如:<TABLE BORDER=5>
<TR><TD>文字</TD></TR>
</TABLE>
2、設(shè)定框線顏色
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>文字</TD></TR>
</TABLE>
3、設(shè)定表格框線的陰影、亮面顏色,讓表格看起來更有立體感!只要利用 BORDERCOLORLIGHT="#顏色碼"(亮面設(shè)定) BORDERCOLORDARK="顏色碼"(暗面設(shè)定)就行了。
怎么讓表格中東西放好
1、讓表格中物件置中 ,可以控制單元格里內(nèi)容的相對位置,只要在<TD>中加入 ALIGN=CENTER參數(shù);讓表格中物件置左 ,參數(shù)ALIGN=LEFT;讓表格中物件置右,參數(shù)ALIGN=RIGHT。
align=center(左右居中),valign=middle(上下居中)。
(因為,<TD>是一個欄位的意思,我們要指定在這欄位中的東西要置中或置左置右,就必須將ALIGN加在<TD>中)
如:<TD align=center > </TD>
2、控制表格內(nèi)文字靠上方、靠下方
利用 VALIGN=TOP 這種屬性即可讓表格內(nèi)物件靠上方對齊。
利用VALIGN=MIDDLE可以讓表格中物件垂直置中(預(yù)設(shè)值),
利用VALIGN=BOTTOM可以讓表格中物件靠下方。
3、表格內(nèi)的內(nèi)容與表格邊框的距離設(shè)定
cellSpacing=n (n代表任意一個數(shù)值)
該屬性用來設(shè)置表格單元格中內(nèi)容與表格邊框的距離,n為零表示允許單元格里的元素靠近邊框。一般而言內(nèi)定值為2 。
cellPadding=n(n代表任意一個數(shù)值)
該屬性用來設(shè)置表格與外層容器的邊距,n為零表示表格沒有邊框距離。保持適當(dāng)?shù)木嚯x,看起來比較舒服。一般而言內(nèi)定值為2。
cellSpacing和cellPadding是制作音畫貼最重要的兩個屬性。也就是說音畫貼里的表格必須有這兩個屬性。
例如:<TABLE cellSpacing=3 cellPadding=12 border=1 width=600 bgcolor=#00ffff>
二、應(yīng)用
可以在表格中嵌套表格。
實例三:
<TABLE cellSpacing=3 cellPadding=12 border=1 width=600 height=450 bgcolor=#00ffff>
<TR>
<TD valign=middle align=center>
<table cellSpacing=3 cellPadding=2 width=90% bgcolor=#000adc border=1>
<tr>
<td width=550 height=400 >
......在這里還可以嵌套表格
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
實例四、還記得居中的設(shè)定吧,變化一下讓它居中:
<DIV align=center>
<TABLE cellSpacing=3 cellPadding=12 border=1 width=600 height=450 bgcolor=#00ffff>
<TR>
<TD>
<DIV align=center>
<table cellSpacing=3 cellPadding=2 width=90% bgcolor=#000adc border=1>
<tr>
<td width=550 height=400 >
......在這里還可以嵌套表格
</td>
</tr>
</table>
</DIV>
</TD>
</TR>
</TABLE>
</DIV>
依據(jù)上面幾個實例,調(diào)整一些屬性及數(shù)據(jù),看看變化的效果。