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