回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 今昔HTML
 HTML概念
 標記一覽
 文件標記
 排版標記
 字體標記
 清單標記
 表格標記Here
 表單標記
 圖形標記
 連結標記
 框架標記
 影像地圖
 多媒體
 其他標記
 特殊字元
 調色原理
 StyleSheets
 加入實例
 本節實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 本節主要介紹的標記:
<TABLE> <TR> <TD>
<TH>
<CAPTION>

欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。

<TABLE> <TR> <TD> :
這三個標記是定義表格的最重要的標記,可以說只學這三個己足夠。
<TABLE>是一個容器標記,意思是說它用以宣告這是表格而且其他表格標記只能在他的 範圍內才適用,屬容器標記的還有其他。
<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"
    文字與格線的距離,請看例子四,那是加至 10 的 padding。

  • align="CENTER"
    表格的擺放位置(水平),可選值為: left, right, center,請看例子五或六,那表格 是放於中間的,為怕一些瀏覽器不支援,故特加上居中標記<CENTER>,只是多 層保證而己,當然只用<CENTER>亦可。

  • valign="TOP".
    表格內字畫等的擺放貼齊位置(垂直),可選值為: top, middle, bottom

  • background="myweb.gif"
    表格棬,與 bgcolor 不要同用。

  • bgcolor="#0000FF"
    表格底色,與 background 不要同用,請看例子六,顏色值請參考調色原理

  • bordercolor="#FF00FF"
    表格邊框顏色,NC 與 IE 有不同的效果,請看例子六,顏色值請參考調色原理

  • bordercolorlight="#00FF00"
    表格邊框光部分的顏色,請看例子二,顏色值請參考調色原理『只適用於 IE』

  • bordercolordark="#00FFFF"
    表格邊框光部分的顏色,請看例子二,使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效,顏色值請參考調色原理『只適用於 IE』

  • cols="2"
    表格欄位數目,只是讓瀏覽器在下載表格是先畫出整個表格而己。

<TR> 的參數設定(常用):
例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

  • align="RIGHT"
    該一列內字畫等的擺放貼齊位置(水平),可選值為: left, center, right

  • valign="MIDDLE"
    該一列內字畫等的擺放貼齊位置(垂直),可選值為: top, middle, bottom

  • bgcolor="#0000FF"
    該一列底色,請看例子五,顏色值請參考調色原理

  • bordercolor="#FF00FF"
    該一列邊框顏色,請看例子三,顏色值請參考調色原理『只適用於 IE』

  • bordercolorlight="#808080"
    該一列邊框光部分的顏色,請看例子三,顏色值請參考調色原理『只適用於 IE』

  • bordercolordark="#FF0000"
    該一列邊框光部分的顏色,請看例子三,使用 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%"
    該一儲存格寬度,接受絕對值(如 80)及相對值(如 80%)。

  • height="400"
    該一儲存格高度。

  • colspan="5"
    該一儲存格向右打通的欄數。請看例子六

  • rowspan="4"
    該一儲存格向下打通的列數。請看例子六

  • align="RIGHT"
    該一儲存格內字畫等的擺放貼齊位置(水平),可選值為: left, center, right

  • valign="BOTTOM"
    該一儲存格內字畫等的擺放貼齊位置(垂直),可選值為: top, middle, bottom

  • bgcolor="#FF00FF"
    該一儲存格底色,請看例子四,顏色值請參考調色原理

  • bordercolor="#808080"
    該一儲存格邊框顏色,請看例子三,顏色值請參考調色原理『只適用於 IE』

  • bordercolorlight="#FF0000"
    該一儲存格邊框光部分的顏色,請看例子三,顏色值請參考調色原理『只適用於 IE』

  • bordercolordark="#00FF00"
    該一儲存格邊框光部分的顏色,請看例子三,使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效,顏色值請參考調色原理『只適用於 IE』

  • background="myweb.gif"
    該一儲存格棬,與 bgcolor 任用其一。

例子一:
原始碼 <table width="60%" border="1">
<tr><td>只有一個儲存格(cell)的表格</td></tr>
</table>
顯示結果

 
只有一個儲存格(cell)的表格
 

例子二:
原始碼 <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
<tr><td>第一列第一欄</td><td>第一列第二欄</td></tr>
</table>
顯示結果

 
第一列第一欄 第一列第二欄
 

例子三:
原始碼 <table width="60%" border="1" cellspacing="5">
     <tr bordercolor="#0000FF">
<td>第一列第一欄</td>
<td>第一列第二欄</td>
     </tr>
     <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
<td>第二列第一欄</td>
<td>第二列第二欄</td>
     </tr>
</table>
顯示結果

 
第一列第一欄 第一列第二欄
第二列第一欄 第二列第二欄
 

例子四:
原始碼 <table width="60%" border="1" cellpadding="10">
     <tr>
<td bgcolor="#FFCCE6">第一列第一欄</td>
<td bgcolor="#FFFFC6">第一列第二欄</td>
     </tr>
     <tr>
<td bgcolor="#FFD9FF">第二列第一欄</td>
<td bgcolor="#DAB4B4">第二列第二欄</td>
     </tr>
</table>
顯示結果

 
第一列第一欄 第一列第二欄
第二列第一欄 第二列第二欄
 

例子五:
原始碼 <center>
<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
     <tr>
<td bgcolor="#FFD2E9">第一列第一欄</td>
<td bgcolor="#FFDAB5">第一列第二欄</td>
<td bgcolor="#FFFFB5">第一列第三欄</td>
     </tr>
     <tr bgcolor="#C0C0C0">
<td>第二列第一欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
     </tr>
</table>
</center>
顯示結果

 

第一列第一欄 第一列第二欄 第一列第三欄
第二列第一欄 第二列第二欄 第二列第三欄
 

例子六
原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
     <tr>
<td>第一列第一欄</td>
<td colspan="2">第一列 之 第二欄及第三欄</td>
     </tr>
     <tr>
<td rowspan="2">第二列及第三列 之 第一欄</td>
<td>第二列第二欄</td>
<td>第二列第三欄</td>
     </tr>
     <tr>
<td>第三列第二欄</td>
<td>第三列第三欄</td>
     </tr>
</table>
</center>
顯示結果

 

第一列第一欄 第一列 之 第二欄及第三欄
第二列及第三列 之 第一欄 第二列第二欄 第二列第三欄
第三列第二欄 第三列第三欄
 

<TH> :
<TH>與<TD>同樣是標示一個儲存格,唯一不同的是<TH>所標示的儲存格中的文字是以粗 體出現,通常用於表格第一列以標示欄目。它的用法是取代<TD>的位置便可以,其參數 設定請參考<TD>。
當然若為<TD>所標示的儲存格中的文字加上粗體標記<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> 的作用是為表格標示一個標題列,有如在表格上方加上一沒格線的打通列。 當然亦可置於下方,通常用以存放該表格的標題。

<CAPTION> 的參數設定(常用):
例如:<caption align="TOP" valign="TOP"></caption>

  • align="TOP"
    該表格標題列相對於表格的擺放貼齊位置(水平),可選值為: left, center, right, top, middle, bottom,若 align="bottom" 的話標題列便會出現對表格的下方,不管你 的原始碼中把 <caption> 放在 <table> 中的頭部或尾部。

  • valign="TOP"
    該表格標題列相對於表格的擺放位置(上下),可選值為: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一樣的,雖然功能重複了,但如果你要標題列 置於下方及向右或向左貼齊,那末兩個參數便可一齊用了。當只需一個參數時, 請首選 align,因為 valign 是由 HTML 3.0 才開始的參數。

例子:
原始碼 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>網頁速成 八月份訪客瀏覽器使用分析</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>
顯示結果

 

網頁速成 八月份訪客瀏覽器使用分析
Month % of IE visitor % of NC visitor
August 61% 39%
 

The Best Web Hosting Company
Download Internet Explorer Download Netscape Netvigator