表格标記
[摘 要]
全寫: HyperText Mark-up Language
譯名: 超文件注标式語言(譯名之一(yī))
簡釋:一(yī)種爲普通文件中(zhōng)某些字句加上标示的語言,其目的在于運用标記(tag)使文件達到預期的顯示效果。
1、欲明白(bái)本篇【HTML剖析】之标記分(fēn)類請看 【标記一(yī)覽】。
2、亦請先明白(bái)圍堵标記與空标記的分(fēn)别請看 【HTML概念】。
<TABLE> <TR> <TD>
<TH>
<CAPTION>
■ <TABLE> <TR> <TD> :
這三個标記是定義表格的最重要的标記,可以說隻學這三個己足夠。
<TABLE>是一(yī)個容器标記,意思是說它用以聲明這是表格而且其他表格标記隻能在他的 範圍内才适用,屬容器标記的還有其他。
<TR>用以标示表格列(row)
<TD>用以标示儲存格(cell)
<TABLE> 的參數設定(常用):
例如: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">
width="400"
表格寬度,接受絕對值(如 80)及相對值(如 80%)。
border="1"
表格邊框厚度,不同浏覽器有不同的内定值,故請指明。
cellspacing="2"
表格格線厚度,請看例子三,那是加厚到 5 的格線。
cellpadding="2"
文字與格線的距離(lí),請看例子四,那是加至 10 的 padding。
align="CENTER"
表格的擺放(fàng)位置(水平),可選值爲: left, right, center,請看例子五或六,那表格 是放(fàng)于中(zhōng)間的,爲怕一(yī)些浏覽器不支援,故特加上居中(zhōng)标記<CENTER>,隻是多 層保證而己,當然隻用<CENTER>亦可。
valign="TOP".
表格内字畫等的擺放(fàng)貼 位置(垂直),可選值爲: top, middle, bottom。
background="myweb.gif"
表格 紙(zhǐ),與 bgcolor 不要同用。
bgcolor="#0000FF"
表格底色,與 background 不要同用,請看例子六。
bordercolor="#FF00FF"
表格邊框顔色,NC 與 IE 有不同的效果,請看例子六。
bordercolorlight="#00FF00"
表格邊框向光部分(fēn)的顔色,請看例子二。『隻适用于 IE』
bordercolordark="#00FFFF"
表格邊框背光部分(fēn)的顔色,請看例子二,使用 bordercolorlight 或 bordercolordark 時 bordercolor 将會失效。『隻适用于 IE』
cols="2"
表格欄位數目,隻是讓浏覽器在下(xià)載表格是先畫出整個表格而己。
<TR> 的參數設定(常用):
例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
align="RIGHT"
該一(yī)列内字畫等的擺放(fàng)貼 位置(水平),可選值爲: left, center, right。
valign="MIDDLE"
該一(yī)列内字畫等的擺放(fàng)貼 位置(垂直),可選值爲: top, middle, bottom。
bgcolor="#0000FF"
該一(yī)列底色,請看例子五。
bordercolor="#FF00FF"
該一(yī)列邊框顔色,請看例子三。『隻适用于 IE』
bordercolorlight="#808080"
該一(yī)列邊框向光部分(fēn)的顔色,請看例子三。『隻适用于 IE』
bordercolordark="#FF0000"
該一(yī)列邊框背光部分(fēn)的顔色,請看例子三,使用 bordercolorlight 或 bordercolordark 時 bordercolor 将會失效。『隻适用于 IE』
<TD> 的參數設定(常用):
例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">
width="48%"
該一(yī)儲存格寬度,接受絕對值(如 80)及相對值(如 80%)。
height="400"
該一(yī)儲存格高度。
colspan="5"
該一(yī)儲存格向右打通的欄數。請看例子六
rowspan="4"
該一(yī)儲存格向下(xià)打通的列數。請看例子六
align="RIGHT"
該一(yī)儲存格内字畫等的擺放(fàng)貼 位置(水平),可選值爲: left, center, right。
valign="BOTTOM"
該一(yī)儲存格内字畫等的擺放(fàng)貼 位置(垂直),可選值爲: top, middle, bottom。
bgcolor="#FF00FF"
該一(yī)儲存格底色,請看例子四。
bordercolor="#808080"
該一(yī)儲存格邊框顔色,請看例子三。『隻适用于 IE』
bordercolorlight="#FF0000"
該一(yī)儲存格邊框向光部分(fēn)的顔色,請看例子三。『隻适用于 IE』
bordercolordark="#00FF00"
該一(yī)儲存格邊框背光部分(fēn)的顔色,請看例子三,使用 bordercolorlight 或 bordercolordark 時 bordercolor 将會失效。『隻适用于 IE』
background="myweb.gif"
該一(yī)儲存格 紙(zhǐ),與 bgcolor 任用其一(yī)。
例子一(yī): 原始碼 <table width="60%" border="1">
<tr><td>隻有一(yī)個儲存格(cell)的表格</td></tr>
</table>
顯示結果 隻有一(yī)個儲存格(cell)的表格
例子二: 原始碼 <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
<tr><td>第一(yī)列第一(yī)欄</td><td>第一(yī)列第二欄</td></tr>
</table>
顯示結果 第一(yī)列第一(yī)欄 第一(yī)列第二欄
例子三: 原始碼 <table width="60%" border="1" cellspacing="5">
<tr bordercolor="#0000FF">
<td>第一(yī)列第一(yī)欄</td>
<td>第一(yī)列第二欄</td>
</tr>
<tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
<td>第二列第一(yī)欄</td>
<td>第二列第二欄</td>
</tr>
</table>
顯示結果 第一(yī)列第一(yī)欄 第一(yī)列第二欄
第二列第一(yī)欄 第二列第二欄
例子四: 原始碼 <table width="60%" border="1" cellpadding="10">
<tr>
<td bgcolor="#FFCCE6">第一(yī)列第一(yī)欄</td>
<td bgcolor="#FFFFC6">第一(yī)列第二欄</td>
</tr>
<tr>
<td bgcolor="#FFD9FF">第二列第一(yī)欄</td>
<td bgcolor="#DAB4B4">第二列第二欄</td>
</tr>
</table>
顯示結果 第一(yī)列第一(yī)欄 第一(yī)列第二欄
第二列第一(yī)欄 第二列第二欄
例子五: 原始碼 <center>
<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
<tr>
<td bgcolor="#FFD2E9">第一(yī)列第一(yī)欄</td>
<td bgcolor="#FFDAB5">第一(yī)列第二欄</td>
<td bgcolor="#FFFFB5">第一(yī)列第三欄</td>
</tr>
<tr bgcolor="#C0C0C0">
<td>第二列第一(yī)欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
</tr>
</table>
</center>
顯示結果
第一(yī)列第一(yī)欄 第一(yī)列第二欄 第一(yī)列第三欄
第二列第一(yī)欄 第二列第二欄 第二列第三欄
例子六 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
<tr>
<td>第一(yī)列第一(yī)欄</td>
<td colspan="2">第一(yī)列 之 第二欄及第三欄</td>
</tr>
<tr>
<td rowspan="2">第二列及第三列 之 第一(yī)欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
</tr>
<tr>
<td>第三列第二欄</td>
<td>第三列第三欄</td>
</tr>
</table>
</center>
顯示結果
第一(yī)列第一(yī)欄 第一(yī)列 之 第二欄及第三欄
第二列及第三列 之 第一(yī)欄 第二列第二欄 第二列第三欄
第三列第二欄 第三列第三欄
■ <TH> :
<TH>與<TD>同樣是标示一(yī)個儲存格,唯一(yī)不同的是<TH>所标示的儲存格中(zhōng)的文字是以粗 體(tǐ)出現,通常用于表格第一(yī)列以标示欄目。它的用法是取代<TD>的位置便可以,其參數 設定請參考<TD>。
當然若爲<TD>所标示的儲存格中(zhōng)的文字加上粗體(tǐ)标記<B>便等如<TH>的效果。
例子: 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<tr align="CENTER">
<th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
</tr>
<tr align="CENTER">
<td>August</td><td>61%</td><td>39%</td>
</tr>
<tr align="CENTER">
<td>July</td><td>54%</td><td>46%</td>
</tr>
<tr align="CENTER">
<td>June</td><td>52%</td><td>48%</td>
</tr>
</table>
</center>
顯示結果
Month % of IE visitor % of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%
■ <CAPTION> :
<CAPTION> 的作用是爲表格标示一(yī)個标題列,有如在表格上方加上一(yī)沒格線的打通列。 當然亦可置于下(xià)方,通常用以存放(fàng)該表格的标題。
<CAPTION> 的參數設定(常用):
例如:<caption align="TOP" valign="TOP"></caption>
align="TOP"
該表格标題列相對于表格的擺放(fàng)貼 位置(水平),可選值爲: left, center, right, top, middle, bottom,若 align="bottom" 的話(huà)标題列便會出現對表格的下(xià)方,不管你 的原始碼中(zhōng)把 <caption> 放(fàng)在 <table> 中(zhōng)的頭部或尾部。
valign="TOP"
該表格标題列相對于表格的擺放(fàng)位置(上下(xià)),可選值爲: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一(yī)樣的,雖然功能重複了,但如果你要标題列 置于下(xià)方及向右或向左貼 ,那末兩個參數便可一(yī) 用了。當隻 一(yī)個參數時, 請首選 align,因爲 valign 是由 HTML 3.0 才開(kāi)始的參數。
例子: 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>網頁速成 八月份訪客浏覽器使用分(fēn)析</caption>
<tr align="CENTER">
<th>Month</th>
<th>% of IE visitor</th>
<th>% of NC visitor</th>
</tr>
<tr align="CENTER">
<td>August</td>
<td>61%</td>
<td>39%</td>
</tr>
</table>
</center>
顯示結果
網頁速成 八月份訪客浏覽器使用分(fēn)析 Month % of IE visitor % of NC visitor
August 61% 39%
[摘 要]
全寫: HyperText Mark-up Language
譯名: 超文件注标式語言(譯名之一(yī))
簡釋:一(yī)種爲普通文件中(zhōng)某些字句加上标示的語言,其目的在于運用标記(tag)使文件達到預期的顯示效果。
1、欲明白(bái)本篇【HTML剖析】之标記分(fēn)類請看 【标記一(yī)覽】。
2、亦請先明白(bái)圍堵标記與空标記的分(fēn)别請看 【HTML概念】。
<TABLE> <TR> <TD>
<TH>
<CAPTION>
■ <TABLE> <TR> <TD> :
這三個标記是定義表格的最重要的标記,可以說隻學這三個己足夠。
<TABLE>是一(yī)個容器标記,意思是說它用以聲明這是表格而且其他表格标記隻能在他的 範圍内才适用,屬容器标記的還有其他。
<TR>用以标示表格列(row)
<TD>用以标示儲存格(cell)
<TABLE> 的參數設定(常用):
例如: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">
width="400"
表格寬度,接受絕對值(如 80)及相對值(如 80%)。
border="1"
表格邊框厚度,不同浏覽器有不同的内定值,故請指明。
cellspacing="2"
表格格線厚度,請看例子三,那是加厚到 5 的格線。
cellpadding="2"
文字與格線的距離(lí),請看例子四,那是加至 10 的 padding。
align="CENTER"
表格的擺放(fàng)位置(水平),可選值爲: left, right, center,請看例子五或六,那表格 是放(fàng)于中(zhōng)間的,爲怕一(yī)些浏覽器不支援,故特加上居中(zhōng)标記<CENTER>,隻是多 層保證而己,當然隻用<CENTER>亦可。
valign="TOP".
表格内字畫等的擺放(fàng)貼 位置(垂直),可選值爲: top, middle, bottom。
background="myweb.gif"
表格 紙(zhǐ),與 bgcolor 不要同用。
bgcolor="#0000FF"
表格底色,與 background 不要同用,請看例子六。
bordercolor="#FF00FF"
表格邊框顔色,NC 與 IE 有不同的效果,請看例子六。
bordercolorlight="#00FF00"
表格邊框向光部分(fēn)的顔色,請看例子二。『隻适用于 IE』
bordercolordark="#00FFFF"
表格邊框背光部分(fēn)的顔色,請看例子二,使用 bordercolorlight 或 bordercolordark 時 bordercolor 将會失效。『隻适用于 IE』
cols="2"
表格欄位數目,隻是讓浏覽器在下(xià)載表格是先畫出整個表格而己。
<TR> 的參數設定(常用):
例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
align="RIGHT"
該一(yī)列内字畫等的擺放(fàng)貼 位置(水平),可選值爲: left, center, right。
valign="MIDDLE"
該一(yī)列内字畫等的擺放(fàng)貼 位置(垂直),可選值爲: top, middle, bottom。
bgcolor="#0000FF"
該一(yī)列底色,請看例子五。
bordercolor="#FF00FF"
該一(yī)列邊框顔色,請看例子三。『隻适用于 IE』
bordercolorlight="#808080"
該一(yī)列邊框向光部分(fēn)的顔色,請看例子三。『隻适用于 IE』
bordercolordark="#FF0000"
該一(yī)列邊框背光部分(fēn)的顔色,請看例子三,使用 bordercolorlight 或 bordercolordark 時 bordercolor 将會失效。『隻适用于 IE』
<TD> 的參數設定(常用):
例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">
width="48%"
該一(yī)儲存格寬度,接受絕對值(如 80)及相對值(如 80%)。
height="400"
該一(yī)儲存格高度。
colspan="5"
該一(yī)儲存格向右打通的欄數。請看例子六
rowspan="4"
該一(yī)儲存格向下(xià)打通的列數。請看例子六
align="RIGHT"
該一(yī)儲存格内字畫等的擺放(fàng)貼 位置(水平),可選值爲: left, center, right。
valign="BOTTOM"
該一(yī)儲存格内字畫等的擺放(fàng)貼 位置(垂直),可選值爲: top, middle, bottom。
bgcolor="#FF00FF"
該一(yī)儲存格底色,請看例子四。
bordercolor="#808080"
該一(yī)儲存格邊框顔色,請看例子三。『隻适用于 IE』
bordercolorlight="#FF0000"
該一(yī)儲存格邊框向光部分(fēn)的顔色,請看例子三。『隻适用于 IE』
bordercolordark="#00FF00"
該一(yī)儲存格邊框背光部分(fēn)的顔色,請看例子三,使用 bordercolorlight 或 bordercolordark 時 bordercolor 将會失效。『隻适用于 IE』
background="myweb.gif"
該一(yī)儲存格 紙(zhǐ),與 bgcolor 任用其一(yī)。
例子一(yī): 原始碼 <table width="60%" border="1">
<tr><td>隻有一(yī)個儲存格(cell)的表格</td></tr>
</table>
顯示結果 隻有一(yī)個儲存格(cell)的表格
例子二: 原始碼 <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
<tr><td>第一(yī)列第一(yī)欄</td><td>第一(yī)列第二欄</td></tr>
</table>
顯示結果 第一(yī)列第一(yī)欄 第一(yī)列第二欄
例子三: 原始碼 <table width="60%" border="1" cellspacing="5">
<tr bordercolor="#0000FF">
<td>第一(yī)列第一(yī)欄</td>
<td>第一(yī)列第二欄</td>
</tr>
<tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
<td>第二列第一(yī)欄</td>
<td>第二列第二欄</td>
</tr>
</table>
顯示結果 第一(yī)列第一(yī)欄 第一(yī)列第二欄
第二列第一(yī)欄 第二列第二欄
例子四: 原始碼 <table width="60%" border="1" cellpadding="10">
<tr>
<td bgcolor="#FFCCE6">第一(yī)列第一(yī)欄</td>
<td bgcolor="#FFFFC6">第一(yī)列第二欄</td>
</tr>
<tr>
<td bgcolor="#FFD9FF">第二列第一(yī)欄</td>
<td bgcolor="#DAB4B4">第二列第二欄</td>
</tr>
</table>
顯示結果 第一(yī)列第一(yī)欄 第一(yī)列第二欄
第二列第一(yī)欄 第二列第二欄
例子五: 原始碼 <center>
<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
<tr>
<td bgcolor="#FFD2E9">第一(yī)列第一(yī)欄</td>
<td bgcolor="#FFDAB5">第一(yī)列第二欄</td>
<td bgcolor="#FFFFB5">第一(yī)列第三欄</td>
</tr>
<tr bgcolor="#C0C0C0">
<td>第二列第一(yī)欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
</tr>
</table>
</center>
顯示結果
第一(yī)列第一(yī)欄 第一(yī)列第二欄 第一(yī)列第三欄
第二列第一(yī)欄 第二列第二欄 第二列第三欄
例子六 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
<tr>
<td>第一(yī)列第一(yī)欄</td>
<td colspan="2">第一(yī)列 之 第二欄及第三欄</td>
</tr>
<tr>
<td rowspan="2">第二列及第三列 之 第一(yī)欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
</tr>
<tr>
<td>第三列第二欄</td>
<td>第三列第三欄</td>
</tr>
</table>
</center>
顯示結果
第一(yī)列第一(yī)欄 第一(yī)列 之 第二欄及第三欄
第二列及第三列 之 第一(yī)欄 第二列第二欄 第二列第三欄
第三列第二欄 第三列第三欄
■ <TH> :
<TH>與<TD>同樣是标示一(yī)個儲存格,唯一(yī)不同的是<TH>所标示的儲存格中(zhōng)的文字是以粗 體(tǐ)出現,通常用于表格第一(yī)列以标示欄目。它的用法是取代<TD>的位置便可以,其參數 設定請參考<TD>。
當然若爲<TD>所标示的儲存格中(zhōng)的文字加上粗體(tǐ)标記<B>便等如<TH>的效果。
例子: 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<tr align="CENTER">
<th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
</tr>
<tr align="CENTER">
<td>August</td><td>61%</td><td>39%</td>
</tr>
<tr align="CENTER">
<td>July</td><td>54%</td><td>46%</td>
</tr>
<tr align="CENTER">
<td>June</td><td>52%</td><td>48%</td>
</tr>
</table>
</center>
顯示結果
Month % of IE visitor % of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%
■ <CAPTION> :
<CAPTION> 的作用是爲表格标示一(yī)個标題列,有如在表格上方加上一(yī)沒格線的打通列。 當然亦可置于下(xià)方,通常用以存放(fàng)該表格的标題。
<CAPTION> 的參數設定(常用):
例如:<caption align="TOP" valign="TOP"></caption>
align="TOP"
該表格标題列相對于表格的擺放(fàng)貼 位置(水平),可選值爲: left, center, right, top, middle, bottom,若 align="bottom" 的話(huà)标題列便會出現對表格的下(xià)方,不管你 的原始碼中(zhōng)把 <caption> 放(fàng)在 <table> 中(zhōng)的頭部或尾部。
valign="TOP"
該表格标題列相對于表格的擺放(fàng)位置(上下(xià)),可選值爲: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一(yī)樣的,雖然功能重複了,但如果你要标題列 置于下(xià)方及向右或向左貼 ,那末兩個參數便可一(yī) 用了。當隻 一(yī)個參數時, 請首選 align,因爲 valign 是由 HTML 3.0 才開(kāi)始的參數。
例子: 原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>網頁速成 八月份訪客浏覽器使用分(fēn)析</caption>
<tr align="CENTER">
<th>Month</th>
<th>% of IE visitor</th>
<th>% of NC visitor</th>
</tr>
<tr align="CENTER">
<td>August</td>
<td>61%</td>
<td>39%</td>
</tr>
</table>
</center>
顯示結果
網頁速成 八月份訪客浏覽器使用分(fēn)析 Month % of IE visitor % of NC visitor
August 61% 39%