MSN Space 開(kāi)放表格語(yǔ)句<Table>...</Table>已經(jīng)有兩周的時(shí)間了,不過(guò)似乎很少在別人的日志中看到。估計(jì)有些朋友覺(jué)得表格語(yǔ)句沒(méi)什么太大用處,其實(shí)不然!HTML 語(yǔ)言中的表格語(yǔ)句其實(shí)功能很強(qiáng)大,而且如果能用活表格語(yǔ)句,不僅可以使你的日志編排更加豐富多彩,而且還能夠完成以前用其他語(yǔ)句很難做到的任務(wù)。
注意:在這一章里,我主要介紹表格語(yǔ)句的基本使用方法,這不僅是活學(xué)活用表格語(yǔ)句的基礎(chǔ),也是檢查表格語(yǔ)句錯(cuò)誤的依據(jù)。除了通過(guò)不對(duì)稱(chēng)表格語(yǔ)句來(lái)達(dá)到空間頁(yè)面特殊效果外,一般表格語(yǔ)句都需要成對(duì)出現(xiàn)!如果日志頁(yè)面上出現(xiàn)半屏顯示,或者只看到空白,而看不到日志內(nèi)容,很可能是表格語(yǔ)句誤用造成的,比如復(fù)制的日志內(nèi)容含有表格語(yǔ)句,但沒(méi)復(fù)制完全;又比在修改日志內(nèi)容時(shí),誤刪了一個(gè)表格符號(hào),造成表格語(yǔ)句不匹配。這就需要大家自己參照下面的表格基本語(yǔ)句格式,仔細(xì)檢查一下自己的日志內(nèi)容,找到不對(duì)稱(chēng)的表格元素,刪除或者補(bǔ)充使之對(duì)稱(chēng),以解決上述問(wèn)題。
(一)表格基本語(yǔ)句格式
<TABLE>....</TABLE> —— 表格指令
<TR>....</TR> —— 表格行
<TD>....</TD> —— 表格欄
<TBODY>....</TBODY> —— 表格主體部分
<CAPTION>....</CAPTION> —— 表格標(biāo)題
<TH>....</TH> —— 表格欄標(biāo)題(粗體字)
這五個(gè)表格基本語(yǔ)句是構(gòu)成一個(gè)表格的骨架,其中<Table>、<TR>、<TD>是最重要的標(biāo)記,學(xué)會(huì)這三個(gè)語(yǔ)句就已經(jīng)能畫(huà)出一個(gè)完整的表格了。請(qǐng)看下面這個(gè)簡(jiǎn)單的例子。
語(yǔ)句:
<TABLE border>
<CAPTION>收支表</CAPTION>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>¥100000</TD> <TD>¥60000</TD> </TR>
</TBODY> </TABLE>
效果:
收支表 公司 | 收入 | 支出 |
A | ¥100000 | ¥60000 |
(二)表格相關(guān)屬性
1、<TABLE>語(yǔ)句常用屬性
示范語(yǔ)句:
<table width="50%" rules="ALL" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="background.gif" bgcolor="#0000FF" bordercolor="#FF00FF" hspace="10" vspace="10">
具體說(shuō)明: - width="50%",表格寬度,接受絕對(duì)值(如 300)及相對(duì)值(如 80%)。
- rules="ALL",表格內(nèi)網(wǎng)格,可選值為: all,none,cols,rows,groups。
- border="1",表格邊框?qū)挾?,如果去掉這個(gè)屬性,就生成無(wú)邊框表格。
- cellspacing="2",表格內(nèi)格線寬度,數(shù)值越大,格線越粗。
- cellpadding="2",文字與格線間距,數(shù)值越大,間距越大。
- align="CENTER",表格的擺放位置(水平),可選值為: left, right, center。
- valign="TOP",表格內(nèi)圖文的擺放位置(垂直),可選值為: top, middle, bottom。
- background="background.gif",表格內(nèi)背景圖案,不要與 bgcolor 同用。
- bgcolor="#0000FF",表格背景色,不要與 background 同用。
- bordercolor="#FF00FF",表格邊框顏色。
-
hspace="10",表格邊框與環(huán)繞文字間水平距離,數(shù)值越大,間距越大。
-
vspace="10",表格邊框與環(huán)繞文字間垂直距離,數(shù)值越大,間距越大。
-
其他表格屬性,因?yàn)橛行┎皇呛艹S?,或者有些?duì)瀏覽器類(lèi)型有要求,并未列出。
2、<TR>語(yǔ)句常用屬性
示范語(yǔ)句:
<tr align="RIGHT" valign="MIDDLE" background="background.gif" bgcolor="#0000FF" bordercolor="#FF00FF">
具體說(shuō)明:
3、<TD>語(yǔ)句常用屬性
示范語(yǔ)句:
<td width="50%" height="300" colspan="2" rowspan="3" align="LEFT" valign="BOTTOM" background="background.gif" bgcolor="#FF00FF" bordercolor="#808080">
具體說(shuō)明:
- width="50%",單元格寬度,接受絕對(duì)值(如 300)及相對(duì)值(如 50%)。
- height="300",單元格高度,接受絕對(duì)值(如 300)及相對(duì)值(如 50%)。
- colspan="2",單元格向右合并欄數(shù),只需寫(xiě)在合并起始單元格中。
- rowspan="3",單元格向下合并欄數(shù),只需寫(xiě)在合并起始單元格中。
- align="LEFT",單元格內(nèi)文字的擺放位置(水平),可選值為: left, right, center。
- valign="BOTTOM",單元格內(nèi)圖文的擺放位置(垂直),可選值為: top, middle, bottom。
- background="background.gif",單元格內(nèi)背景圖案,不要與 bgcolor 同用。
- bgcolor="#0000FF",單元格內(nèi)背景色,不要與 background 同用。
- bordercolor="#FF00FF",單元格內(nèi)邊框顏色。
- 其他單元格屬性,因?yàn)橛行┎皇呛艹S?,或者有些?duì)瀏覽器類(lèi)型有要求,并未列出。
(三)表格簡(jiǎn)單的例子
1、去掉<Table>中的 Border 參數(shù)即可得到無(wú)邊框表格。
語(yǔ)句:
<TABLE>
<CAPTION>收支表</CAPTION>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>¥100000</TD> <TD>¥60000</TD> </TR>
</TBODY> </TABLE>
效果:
收支表 公司 | 收入 | 支出 |
A | ¥100000 | ¥60000 |
2、通過(guò) Border、BorderColor,改變表格邊框的大小與顏色。
語(yǔ)句:
<TABLE border=9 bordercolor=green>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>¥100000</TD> <TD>¥60000</TD> </TR>
</TBODY> </TABLE>
效果:
公司 | 收入 | 支出 |
A | ¥100000 | ¥60000 |
3、通過(guò) Cellspacing 還可以調(diào)節(jié)單元格間距離。
語(yǔ)句:
<TABLE border=9 cellspacing=6>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>¥100000</TD> <TD>¥60000</TD> </TR>
</TBODY> </TABLE>
效果:
公司 | 收入 | 支出 |
A | ¥100000 | ¥60000 |
4、ColSpan 與 RowSpan 的使用。
語(yǔ)句:
<TABLE border=2 bordercolor=black>
<TBODY>
<TR> <TH>公司</TH> <TH colspan=2>收支</TH> <TH rowspan=2>盈利 !</TH> </TH>
<TR> <TD>A</TD> <TD>¥100000</TD> <TD>¥60000</TD> </TR>
</TBODY> </TABLE>
效果:
公司 | 收支 | 盈利 ! |
A | ¥100000 | ¥60000 |
這里對(duì)表格的基本介紹,主要是為了下一篇教程做個(gè)鋪墊。在教程(19)中,將給出一些表格在 Live Spaces 里的具體應(yīng)用實(shí)例,比如:文繞圖結(jié)構(gòu)、多欄文字、給文字添加背景等。