好孩子的網頁設計
第九課: XHTML Table Module Attributions
Jedi
Jedi
2006
text/html
TITLE::好孩子的網頁設計,第九課
[[IMG src="../image/20060726.png" width="464" height="464"]]
----
表格標籤屬性
----
0.
----
table, caption, colgroup, col,
thead, tfoot, tbody, tr, th, td
----
常用屬性
----
1.
----
[[EM:table]], caption, colgroup, col,
thead, tfoot, tbody, tr, th, td
----
HEADER::table
表格內容摘要
[[EM:summary]]="foo"
----
寬度
[[EM:width]]="foo"
----
FOOTER::寬度 (width)
正整數,表示預期的寬度(像素)
百分比,表示預期佔用
最大可用寬度的百分比
----
設定成很小時……
不一定能如預期般小
----
FOOTER::
框線粗細
[[EM:border]]="foo"
----
FOOTER::框線粗細 (border)
非負整數(像素)
----
border="[[EM:0]]"
不使用框線
----
FOOTER::
外框
[[EM:frame]]="foo"
----
FOOTER::外框 (frame)
沒有 ([[EM:void]]), 祇有上面 ([[EM:above]]), 祇有下面 ([[EM:below]]),
上面和下面 ([[EM:hsides]]), 祇有左邊 ([[EM:lhs]]), 祇有右邊 ([[EM:rhs]]),
左邊和右邊 ([[EM:vsides]]), 整個外框 ([[EM:box]] 或 [[EM:border]])
----
需搭配 [[EM:border]] 屬性
----
FOOTER::
格線
[[EM:rules]]="foo"
----
FOOTER::格線 (rules)
沒有 ([[EM:none]]), 按照分群 ([[EM:groups]]),
按照列 ([[EM:rows]]), 按照欄 ([[EM:cols]]),
欄和列都要 ([[EM:all]])
----
需搭配 [[EM:border]] 屬性
----
FOOTER::
資料格間的距離
[[EM:cellspacing]]="foo"
----
FOOTER::資料格間的距離 (cellspacing)
同時影響
上下左右
----
也影響表格邊框
至資料格間的距離
----
非負整數(像素)或百分比
----
但,
----
多數瀏覽器
不支援百分比
----
FOOTER::
資料格線與資料間的距離
[[EM:cellpadding]]="foo"
----
FOOTER::資料格線與資料間的距離 (cellpadding)
同時影響
上下左右
----
非負整數(像素)或百分比
----
但,
----
多數瀏覽器
不支援百分比
----
HEADER::
FOOTER::
2.
----
table, caption, [[EM:colgroup]], [[EM:col]],
thead, tfoot, tbody, tr, th, td
----
HEADER::colgroup, col
寬度
[[EM:width]]="foo"
----
FOOTER::寬度 (width)
正整數,表示預期的寬度(像素)
百分比,表示預期佔用
最大可用寬度的百分比
寬度比,用「份數」分配可用寬度
例如 [[EM:3*]] 表示三份
實際比例則按照總份數來分配
----
FOOTER::
水平對齊
[[EM:align]]="foo"
----
FOOTER::水平對齊 (align)
齊右 ([[EM:right]]), 齊左 ([[EM:left]]),
居中 ([[EM:center]]), 左右拉齊 ([[EM:justify]]),
按指定的文字對齊 ([[EM:char]])
----
FOOTER::
指定要對齊的文字
[[EM:char]]="foo"
----
FOOTER::指定要對齊的文字 (char)
對齊小數點
char="[[EM:.]]"
----
FOOTER::
對齊時的縮排
[[EM:charoff]]="foo"
----
FOOTER::對齊時的縮排 (charoff)
正整數,表示預期的寬度(像素)
百分比,表示預期佔用
最大可用寬度的百分比
----
FOOTER::
垂直對齊
[[EM:valign]]="foo"
----
FOOTER::垂直對齊 (valign)
對齊頂端 ([[EM:top]]), 對齊底端 ([[EM:bottom]]),
對齊中線 ([[EM:middle]]), 對齊基線 ([[EM:baseline]])
----
FOOTER::
串接資料格
[[EM:span]]="foo"
----
FOOTER::串接資料格 (span)
正整數,表串接資料格數
----
ALIGN::LEFT
<colgroup span="3">
<col />
<col />
<col />
</colgroup>
----
HEADER::
FOOTER::
3.
----
table, caption, colgroup, col,
[[EM:thead]], [[EM:tfoot]], [[EM:tbody]], [[EM:tr]], th, td
----
HEADER::thead, tfoot, tbody, tr
align
char
charoff
valign
----
HEADER::
4.
----
table, caption, colgroup, col,
thead, tfoot, tbody, tr, [[EM:th]], [[EM:td]]
----
HEADER::th, td
align
char
charoff
valign
----
對應的資料標題
[[EM:headers]]="foo"
----
FOOTER::對應的資料標題 (headers)
對應的資料標題的 id
----
ALIGN::LEFT
<table>
……
<tr>
<th [[EM:id="header001"]]>標題一<th>
……
</tr>
<tr>
<td [[EM:headers="header001"]]>資料一<th>
……
</tr>
……
</table>
----
FOOTER::
內容的縮寫
[[EM:abbr]]="foo"
----
串接欄數
[[EM:colspan]]="foo"
----
FOOTER::串接欄數 (colspan)
正整數,表串接欄數
----
FOOTER::
串接列數
[[EM:rowspan]]="foo"
----
FOOTER::串接列數 (rowspan)
正整數,表串接列數
----
FOOTER::
資料軸
[[EM:axis]]="foo"
----
FOOTER::資料軸 (axis)
資料分類
----
FOOTER::
資料範圍
[[EM:scope]]="foo"
----
FOOTER::資料範圍 (scope)
同一欄 ([[EM:col]]), 同一列 ([[EM:row]]),
同一個資料欄分組 ([[EM:colgroup]]),
同一個資料列分組 ([[EM:rowgroup]])
----
HEADER::
FOOTER::
作業
----
HEADER::作業
上週作業
----
表格
----
補完表格標籤屬性
----
實驗各種屬性
----
回報哪些
支援不佳
----
註明瀏覽器及版本
----
HEADER::
預告
----
HEADER::預告
超連結與圖片