■ 表格標記
<TABLE> <TR> <TD>
<TH>
<CAPTION>
欲明白本篇【HTML徹底剖析】之標記分類,請看 【標記一覽】。
也請先明白圍堵標記與空標記的分別,請看
【HTML概念】。
|
|
■
<TABLE> <TR> <TD> :
|
▲Top
|
|
<TABLE>...</TABLE>
用法: 創建一個表格
開始/結束標識: 必須/必須
屬性: %coreattrs,%i18n,%events
align="..."被反對。控製對齊方式(left,center,right,justify)
bgcolor="..."被反對。設置背景顏色
width="..."設置表格的寬度
cols="..."設置表格中的列數
border="..."用像素為單位設置表格邊框的寬度
frame="..."設置表格的可視化部分(void, above, below, hside,
lhs, rhs,vsides,box, border)
rules="..."設置表格中可視化的線條(none, group, rows, cols, all)
cellspacing="..."設置單元格之間的間距
cellpading="..."設置單元格內的間距
空: 不允許
|
<TR>...</TR>
用法: 定義表格一行的單元格
開始/結束標識: 必須/可選
屬性: %coreattrs,%i18n,%events
align="..."設置水平方向上單元各種內容的對齊方式(left,center,right,justify)
char="..."設置一個字符,時的該列都向它對齊
charoff="..."取消把一行的對齊方式設置為向第一個字符對齊
valign="..."豎直方向上單元中內容的對齊方式(top,middle,bottom,baseline)
空: 不允許
|
<TD>...</TD>
用法: 定義一個單元格的內容
開始/結束標識: 必須/可選
屬性: %coreattrs,%i18n,%events
axis="..."表示縮寫後的名字
axes="..."設置屬於單元格的行和列的軸的名字
nowarp="..."被反對。不允許單元格中的內容折行
bgcolor="..."被反對。設置背景顏色
rowspan="..."設置一個單元格中合並的行數
colspan="..."設置一個單元格中合並的列數
align="..."設置水平方向上單元各種內容的對齊方式(left,center,right,justify)
char="..."設置一個字符,時的該列都向它對齊
charoff="..."取消把一行的對齊方式設置為向第一個字符對齊
valign="..."豎直方向上單元中內容的對齊方式(top,middle,bottom,baseline)
空: 不允許
|
這三個標記是定義表格的最重要的標記,可以說隻學這三個已足夠。
<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="#CF0000"
bordercolorlight="#00FF00"
bordercolordark="#00FFFF" cols="2">
- width="400"
表格寬度,接受絕對值(如 80)及相對值(如 80%)。
- border="1"
表格邊框的厚度,不同瀏覽器有不同的內定值,故請指明。
- cellspacing="2"
表格格線的厚度,請看 例子三,那是加厚到
5 的格線。
- cellpadding="2"
文字與格線的距離,請看 例子四,那是加至
10 的邊距。
- align="CENTER"
表格的擺放位置(水平),可選值為:
left, right, center,請看 例子五或六,那表格是放於中間的,為怕一些瀏覽器不支持,故特意加上居中標記<CENTER>,隻是多一層保證而已,當然隻用<CENTER>也可。
- valign="TOP".
表格內內容的對齊方式(垂直),可選值為:
top, middle, bottom。
- background="myweb.gif"
表格的背景圖片,與 bgcolor 不要同用。
- bgcolor="#0000FF"
表格的底色,與 background
不要同用,請看 例子六
- bordercolor="#CF0000"
表格邊框顏色,NC 與 IE 有不同的效果,請看 例子六。
- bordercolorlight="#00FF00"
表格邊框向光部分的顏色,請看 例子二。隻適用於 IE
- bordercolordark="#00FFFF"
表格邊框背光部分的顏色,請看 例子二,使用
bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。隻適用於 IE
- cols="2"
表格欄位數目,隻是讓瀏覽器在下載表格時先畫出整個表格而已。
<TR> 的參數設定(常用):
例如:<tr align="RIGHT"
valign="MIDDLE" bgcolor="#0000FF"
bordercolor="#CF0000" bordercolorlight="#808080"
bordercolordark="#FF0000">
- align="RIGHT"
該一列內內容的對齊方式(水平),可選值為:
left, center, right。
- valign="MIDDLE"
該一列內內容的對齊方式(垂直),可選值為:
top, middle, bottom。
- bgcolor="#0000FF"
該一列底色,請看 例子五。
- bordercolor="#CF0000"
該一列邊框顏色,請看 例子三。(隻適用於
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="#CF0000" 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="#CF0000"
該一儲存格底色,請看 例子四。
- 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>
|
顯示結果
|
|
例子二:
原代碼
|
<table
width="60%" border="5"
bordercolorlight="#CF0000"
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="#CF0000"
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>
|
顯示結果
|
第一列第一欄
|
第二列及第三列 的 第一欄
|
第一列的第二、三欄
|
第二列第二欄
|
第三列第二欄
|
第二列第三欄
|
第三列第三欄
|
|
|
|
|
用法: 定義表格頁眉單元格的內容
開始/結束標識: 必須/可選
屬性: %coreattrs,%i18n,%events
axis="..."表示縮寫後的名字
axes="..."設置屬於單元格的行和列的軸的名字
nowarp="..."被反對。不允許單元格中的內容折行
bgcolor="..."被反對。設置背景顏色
rowspan="..."設置一個單元格中合並的行數
colspan="..."設置一個單元格中合並的列數
align="..."設置水平方向上單元各種內容的對齊方式(left,center,right,justify)
char="..."設置一個字符,時的該列都向它對齊
charoff="..."取消把一行的對齊方式設置為向第一個字符對齊
valign="..."豎直方向上單元中內容的對齊方式(top,middle,bottom,baseline)
空: 不允許
|
<TH>與<TD>同樣是標記一個儲存格,唯一不同的是<TH>所標記的儲存格中的文字是以粗體出現,通常用於表格中的標題欄目。用它取代<TD>的位置便可以,其參數設定請參考<TD>。
當然你也可以在<TD>所標記的文字加上粗體標記便能達到同樣效果。
例子:
原代碼
|
<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%
|
|
|
|
|
用法: 顯示表格的標題
開始/結束標識: 必須/必須
屬性: %coreattrs,%i18n,%events
align="..."被反對。控製對齊方式(left,center,right,justify)
空: 不允許
注釋: 這個元素是可選的
|
<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%
|
|
|
網頁教學網--專業的網頁教學站點
|