好孩子的網頁設計
第七課: XHTML Table Module
Jedi
Jedi
2006
text/html
TITLE::好孩子的網頁設計,第七課
[[IMG src="../image/20060712.png" width="464" height="464"]]
----
資料表格
----
HEADER::資料表格
一覽
----
FOOTER::表格
[[IMG src="../image/table-complex.png" width="807" height="331"]]
----
FOOTER::
表格 ([[EM:table]])
[[EM:<table>]]
----
<table> …… </table>
----
FOOTER::表格標題
[[IMG src="../image/table-complex-caption.png" width="807" height="331"]]
----
FOOTER::表格前面的部分
[[IMG src="../image/table-complex-thead.png" width="807" height="331"]]
----
FOOTER::表格底部
[[IMG src="../image/table-complex-tfoot.png" width="807" height="331"]]
----
FOOTER::表格實際的部分
[[IMG src="../image/table-complex-tbody.png" width="807" height="331"]]
----
FOOTER::
表格標題 ([[EM:caption]])
[[EM:<caption>]]
----
ALIGN::LEFT
<table>
<caption>表格標題</caption>
……
</table>
----
表格前面的部分 ([[EM:t]]able [[EM:head]])
[[EM:<thead>]]
表格底部 ([[EM:t]]able [[EM:foot]])
[[EM:<tfoot>]]
表格實際的部分 ([[EM:t]]able [[EM:body]])
[[EM:<tbody>]]
----
HEADER::thead, tfoot, tbody
全有全無
----
順序固定
----
目的:
優先提供頭尾索引資訊
----
全部不用:
簡單的表格
----
HEADER::資料表格
ALIGN::LEFT
<table>
<caption>表格標題</caption>
<thead>
……
</thead>
<tfoot>
……
</tfoot>
<tbody>
……
</tbody>
</table>
----
FOOTER::資料列
[[IMG src="../image/table-complex-tr.png" width="807" height="331"]]
----
FOOTER::資料標題
[[IMG src="../image/table-complex-th.png" width="807" height="331"]]
----
FOOTER::資料儲存格
[[IMG src="../image/table-complex-td.png" width="807" height="331"]]
----
FOOTER::
資料列 ([[EM:t]]able [[EM:r]]ow)
[[EM:<tr>]]
----
資料標題 ([[EM:t]]able [[EM:h]]eader)
[[EM:<th>]]
----
資料儲存格 ([[EM:t]]able cell (bo[[EM:d]]y))
[[EM:<td>]]
----
ALIGN::LEFT
<tr>
<th>資料標題一</th>
<th>資料標題二</th>
<th>資料標題三</th>
</tr>
<tr>
<td>資料第一列第一欄</td>
<td>資料第一列第二欄</td>
<td>資料第一列第三欄</td>
</tr>
<tr>
<td>資料第二列第一欄</td>
<td>資料第二列第二欄</td>
<td>資料第二列第三欄</td>
</tr>
----
ALIGN::LEFT
<table>
<caption>表格標題</caption>
<thead>
<tr>
<th>資料標題一</th>
<th>資料標題二</th>
</tr>
</thead>
<tfoot>
<tr>
<td>資料標尾一</td>
<td>資料標尾二</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>資料第一列第一欄</td>
<td>資料第一列第二欄</td>
</tr>
<tr>
<td>資料第二列第一欄</td>
<td>資料第二列第二欄</td>
</tr>
</tbody>
</table>
----
ALIGN::LEFT
FOOTER::簡單表格
<table>
<caption>表格標題</caption>
<tr>
<th>資料標題一</th>
<th>資料標題二</th>
</tr>
<tr>
<td>資料第一列第一欄</td>
<td>資料第一列第二欄</td>
</tr>
<tr>
<td>資料第二列第一欄</td>
<td>資料第二列第二欄</td>
</tr>
</table>
----
FOOTER::
表格架構
----
FOOTER::資料欄
[[IMG src="../image/table-complex-col.png" width="807" height="331"]]
----
FOOTER::資料欄分組
[[IMG src="../image/table-complex-colgroup.png" width="807" height="331"]]
----
FOOTER::
資料欄分組 ([[EM:col]]umn [[EM:group]]ing)
[[EM:<colgroup>]]
資料欄 ([[EM:col]]umn)
[[EM:<col />]]
----
ALIGN::LEFT
<colgroup>
<col />
</colgroup>
<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
</colgroup>
----
ALIGN::LEFT
FOOTER::(1/2)
<table>
<caption>軍火比較表</caption>
<colgroup>
<col />
</colgroup>
<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
</colgroup>
<thead>
<tr>
<th>項目</th>
<th>性能</th>
<th>價格</th>
<th>備註</th>
</tr>
</thead>
……
----
ALIGN::LEFT
FOOTER::(2/2)
……
<tfoot>
<tr>
<td>基準</td>
<td>越高越好</td>
<td>越低越好</td>
<td>僅供參考</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>雷射武器</td>
<td>50</td>
<td>90</td>
<td>精確性高</td>
</tr>
<tr>
<td>地圖兵器</td>
<td>90</td>
<td>2800</td>
<td>範圍廣</td>
</tr>
</tbody>
</table>
----
FOOTER::
[[IMG src="../image/table-complex.png" width="807" height="331"]]
----
關於 <table>
----
HEADER::關於 <table>
區塊組件
----
不可以在 <p> 內
----
ALIGN::LEFT
<p>
……
</p>
<table>
……
</table>
<p>
……
</p>
----
<table> 內祇能有:
<caption>, <thead>, <tfoot>, <tbody>,
<colgroup>, <col />, <tr>
----
HEADER::
<caption>, <thead>, <tfoot>,
<tbody>, <colgroup>
祇能在 <table> 內
----
<colgroup> 內祇能有 <col />
----
<thead>, <tfoot>, <tbody> 內:
祇能有 <tr>
----
<tr> 內祇能有 <th> 或 <td>
<th> 或 <td> 祇能在 <tr> 內
----
HEADER::
作業
----
HEADER::作業
上週作業
----
加入表格
----
HEADER::
預告
----
HEADER::預告
註解及標籤屬性