表格代碼
格 類 別
代 碼
效 果
說 明
表格基本代碼
<TABLE><TR><TD>和</TD></TR></TABLE>
由這六標(biāo)簽及border這個屬性組合,可以通過在
代碼中加入更多屬性來實現(xiàn)表格的各種不同樣式。
☆☆☆☆☆☆
☆☆☆☆☆☆
最基本表格
<TABLE border=1>
<TR><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)的“表格內(nèi)容”可以是文字、圖片、
flash、鏈接網(wǎng)址等。
多單元表格
<TABLE border=1>
<TR><TD>表格內(nèi)容</TD> <TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
☆☆☆☆☆☆
多行多列表格
<TABLE border=1>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
☆☆☆☆☆☆
表格左右欄位合并
<TABLE border=1>
<TR><TD colspan=3>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表 格 內(nèi) 容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
首行的<TD>標(biāo)簽中多了一個colspan命令,
這是“左右欄位合并”的屬性,colspan=3的意思是
“首行合并了3個單元格”,因此后面的的兩個<TD>
都可以省掉,因為那兩格被合并了。
表格低行左右欄位合并
<TABLE border=1>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD colspan=3>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表 格 內(nèi) 容
底行的<TD>標(biāo)簽中多了一個colspan命令,這
也是“左右欄位合并”的屬性,colspan=3的意思是“
底行合并了3個單元格”,因此后面的的兩個<TD>
都也可以省 掉。
表格上下欄位合并
<TABLE border=1>
<TR><TD rowspan=2>表格內(nèi)容</TD><TD>
表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
首列的<TD>標(biāo)簽中則多了個rowspan命令,
這是“上下欄位合并”的屬性,rowspan=2的意思是
“首列合并了2個單元格”。
表格對齊設(shè)置
<TABLE height=80 width=300 border=1>
<TR><TD>表格內(nèi)容</TD></TR>
</TABLE>
表 格 內(nèi) 容
表格邊框大小的設(shè)置,可通過增加表格的“width”
和“height”的屬性來設(shè)定表格的“寬度”和“高度”,其寬
度和高度由數(shù)值(即像素數(shù))決定。
表格內(nèi)容居中
<TABLE height=80 width=300 border=1>
<TR><TD align=center>表格內(nèi)容</TD></TR>
</TABLE>
表 格 內(nèi) 容
表格中的內(nèi)容默認(rèn)位置靠左,只要在<TD>標(biāo)簽加
入居中屬性“align=center”即可將表格內(nèi)容居中。
表格內(nèi)容靠上方對齊
<TABLE height=80 width=300 border=1>
<TR><TD align=center valign=top>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
在<TD>標(biāo)簽中加入“valign=top”屬性可將表格中的
內(nèi)容靠上方對齊。
表格背景顏色
<TABLE bgcolor=#6000ff border=1>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容表格內(nèi)容
表格內(nèi)容表格內(nèi)容
表格背景顏色(即邊框內(nèi)的底色)可利用“bgcolor=
顏色碼”進(jìn)行設(shè)定,顏色碼可根據(jù)愛好選定。
指定一行背景顏色
<TABLE border=1>
<TR bgcolor=#660000><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
如果將bgcolor="顏色碼"加在<TR>中,可以指定“一
行”的背景顏色。
指定一欄背景顏色
<TABLE border=1>
<TR><TD bgcolor=#660000>表格內(nèi)容</TR><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
如果將bgColor="顏色碼"加在<TD>中,可以指定“
一欄”的背景顏色。
表格底色用圖片
<TABLE background=圖片地址 border=1>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格的底色也可以用圖片來代替,只要將background="
圖片地址"加到表格中就行了,方法和表格背景顏色基本
一樣。
表格底色一欄用圖片
<TABLE border=1>
<TR><TD background=圖片地址>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
表格內(nèi)容
如果將background="圖片地址"加在<TD>中,可以指定 “一欄”的背景。
表格框線粗細(xì)
<TABLE border=5>
<TR><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
設(shè)定表格框線的粗細(xì),只需將屬性“border”的數(shù)值設(shè)
置成自己滿意即可,如將1改成5。
表格框線顏色
<TABLE borderColor=#0080FF border=5>
<TR><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格框線顏色的設(shè)定,只需將屬性“borderColor”的顏
色碼設(shè)置成自己滿意即可。
表格邊框立體感
<TABLE borderColorDark=#004B97
borderColorLight=#62B0FF border=5>
<TR><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
設(shè)定表格的陰影、亮面顏色,可以使表格的邊框更富
立體感,只需將屬性“borderColorLight”的顏色碼(亮面)和 “ borderColorDark”的顏色碼(暗面)選定即可。
表格內(nèi)容格線間距離
<TABLE cellpadding=5 border=1>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
利用“cellpadding”屬性設(shè)定表格內(nèi)容與格線之間的距離
,其默認(rèn)值為2,以自己滿意即可。
表格欄位格線間距離
<TABLE cellspacing=5 border=1>
<TR><TD>表格內(nèi)容</TD><TD>表格內(nèi)容</TD></TR>
</TABLE>
表格內(nèi)容
表格內(nèi)容
利用“cellspacing”屬性設(shè)定表格欄位格線之間的距離。
其默認(rèn)值為2,以自己滿意即可。
表格常用屬性
1、<TABLE></TABLE>:定義表格的元素。分別作起、始標(biāo)識符,網(wǎng)頁中有幾張表格,就有幾對此元素。
2、<TR></TR>:定義表格中“行”的元素。在表格中有幾對此元素就表示當(dāng)前表格中有幾行。
3、<TD></TD>:表示一行中單元格的元素。一行中有幾對此元素,就有幾個單元格。
4、border:表格外框線寬度,屬性值為數(shù)字。如border=5,表示表格邊框的粗細(xì)為5個像素(默認(rèn)值為1),為0表示沒有邊框。
5、borderColor: 表格的邊框線顏色,屬性值為各種顏色代碼(當(dāng)border值不為0時設(shè)置此值有效)。如 borderColor=#0080FF,表示表格邊框線的顏色為藍(lán)色(默認(rèn)值為白色)。
6、bordercolorlight:亮邊框(表格的左邊和上邊框)顏色,屬性值為各種顏色代碼(當(dāng)border值不為0時設(shè)置此值有效)。
7、bordercolordark:暗邊框(表格的右邊和下邊框)顏色,屬性值為各種顏色代碼(當(dāng)border值不為0時設(shè)置此值有效)。
8、bgcolor:表格的背景顏色,屬性值為各種顏色代碼。 如 bgcolor=#FF0000,表示表格背景色為紅色(默認(rèn)值為無色)。
9、background:表格的背景圖案,屬性值為有效的圖片地址。
10、cellpadding:表示單元格內(nèi)容與單元格邊框之間的距離,屬性值為數(shù)字。
11、cellspacing:表示表格中各單元格的間距,屬性值為數(shù)字。當(dāng)表格只有一個單元格時,則表示該單元格與表格邊框的距離。
12、width:表格的寬度,屬性值為像素和百分比兩種。(width="100")
13、height:表格的高度,取值方法同width。
14、align:表格的對齊方式,屬性值為left(左對齊,默認(rèn))、center(居中)以及right(右對齊)。
15、colspan:定義合并表格的列數(shù),屬性值是數(shù)字。
16、rowspan:定義合并表格的行數(shù),屬性值是數(shù)字。
17、<DIV align=center></DIV> :表格邊框在網(wǎng)頁內(nèi)置中。
18、<caption></caption> :建立表格的標(biāo)題,通過align屬性定義標(biāo)題的位置,其屬性有四:即 top(在表格上方)、bottom(在表格下方)、left(在表格的左上方)、right(在表格的右上方)。
$$$$$$$