XHTML1.0 表格類標籤

<table>

<table> STF table
屬  性 DTD 說  明 屬 性 值
align TF 文字位置 center (置中)、left (靠左)、right (靠右)
bgcolor TF 背景顏色 RGB 設定方式、顏色名稱
border STF 框線厚度 pix (像素)
cellpadding STF 內緣距離 pix (像素)、% (百分比)
cellspacing STF 內框線厚度 pix (像素)、% (百分比)
width STF 表格寬度 pix (像素)、% (百分比)
frame STF 顯示邊線 void (內框線)、above (頂邊)
below (底邊)、hsides (垂直邊)
lhs (左邊垂直邊)、rhs (右邊垂直邊)
vsides (水平邊)、box、border (四邊)
※需有 border 屬性
rules STF 顯示的區域 none, groups, rows, cols, all
※需有 border 屬性
summary STF 表格摘要 text
DTD:S=Strict,T=Transitional,F=Frameset。

這個表格標籤是屬於上層標籤,它也可以在超文件標記語言表格結構中來構成其它元素邊界的標籤。表格類的標籤全部皆有結束標籤。

範  例

<table>
 <tr>
  <td>表格</td>
 </tr>
</table>

範例結果
表格

上面的範例中只能看到表格兩字,而看不到框線其原因是沒幫表格加上框線厚度屬性,這是因為沒有加 border 屬性的話其預設值是 0。

範  例

<table border="1">
 <tr><td>格子一</td><td>格子二</td></tr>
 <tr><td>格子三</td><td>格子四</td></tr>
</table>

範例結果
格子一 格子二
格子三 格子四

左邊的圖是用來表示上述的表格範例。

基本上,表格是由 table 、 tr 與 td 三種標籤所構築而成;所謂的 tr 我們可以把它想像成是由左至右的「列」,而 td 則可以把它想像成一格一格的「欄位」,並且這些「欄位」必須置於「列」中。

例如左邊的圖,我們可以把它解釋為——這個表格有 2 列與 4 個欄位(每列有 2 個欄位)。

至於我們想顯示的資料則必須置於欄位(或稱儲存格)中,也就是在 <td> 與 </td> 之間。

其實表格中也可以再有表格,也就是巢狀表格;可以有多少層?只要你的腦筋不打結要做多少層都可以。記得每一層的 <table> 要加在上一層 <table> 的 <td> 之後 </td> 之前。

<tr>

<tr> STF table-row
屬  性 DTD 說  明 屬 性 值
align STF 排列位置 center、left、right、justify、char
bgcolor TF 列的背景顏色 RGB 設定方式、顏色名稱
char STF 對齊的字元 character ※當 alig="char" 才可使用
charoff STF 從左側開始的字元偏移量 pix、% ※當 alig="char" 才可使用
valign STF 垂直位置 baseline、bottom、middle、top
DTD:S=Strict,T=Transitional,F=Frameset。

<td> 與 <th>、<caption>

<td> 與 <th> STF table-cell
屬  性 DTD 說  明 屬 性 值
abbr STF 縮寫 abbr_text
align STF 排列位置 center、left、right、justify、char
axis STF 分隔分類名 category_names
bgcolor TF 背景顏色 RGB 設定方式、顏色名稱
char STF 對齊的字元 character ※當alig="char"才可使用
charoff STF 字元偏移量 pix、% ※當alig="char"才可使用
colspan STF 合併水平格 number
headers STF   header_cells’_id
height TF 儲存格高度 pix
nowrap TF 文字不斷列  
rowspan STF 合併垂直格 number
scope STF   col、colgroup、row、rowgroup
valign STF 垂直位置 baseline、bottom、middle、top
width TF 儲存格寬度 pix、%
<caption> 表格標題 STF table-caption
屬  性 DTD 說  明 屬 性 值
align TF 排列位置 bottom、left、right、top
DTD:S=Strict,T=Transitional,F=Frameset。

<th> 標籤和 <td> 標籤很類似,它們之間所不同的是 <th> 所定義的儲存格資料有置中和粗體的特性,所以一般常放在最上列或最左行。

範  例

<table border="1">
 <tr><td colspan="2">格子一合併格子二</td></tr>
 <tr><td>格子三</td><td>格子四</td></tr>
</table>

範例結果
格子一合併格子二
格子三 格子四

上述則是一個簡單的合併 2 個水平(並列)的儲存格。

<colgroup> 與 <col>

<colgroup> 欄群組 STF table-column-group
<col> 欄群組 STF table-column
屬性 DTD 說  明 屬性值
align STF 排列位置 center、left、right、justify、char
char STF 對齊的字元 character ※當 alig=”char” 才可使用
charoff STF 字元偏移量 pix、% ※當 alig=”char” 才可使用
span STF 多少格數 number
valign STF 垂直位置 bottom、middle、top、baseline
width STF 儲存格寬度 pix、%
DTD:S=Strict,T=Transitional,F=Frameset。

<colgroup> 與 <col> 須使用在 <table> 與 </table> 標籤的涵括之中。

這是用來將垂直的儲存格做成群組化。

範  例

<table border="1">
 <colgroup span="3">
  <col width="10"></col>
  <col width="20"></col>
  <col width="30"></col>
 </colgroup>
 <tr>
  <td>1</td><td>2</td><td>3</td><td>4</td>
 </tr>
</table>

範例結果
1 2 3 4

<tbody> 、 <tfoot> 與 <thead>

<tbody> STF table-row,table-row-group
<tfoot> 與 <thead> STF table-row,table-row-group,table-footer-group
屬性 DTD 說  明 屬性值
align STF 排列位置 center、left、right、justify、char
char STF 對齊的字元 character ※當 alig=”char” 才可使用
charoff STF 字元偏移量 pix、% ※當 alig=”char” 才可使用
valign STF 垂直位置 bottom、middle、top、baseline
DTD:S=Strict,T=Transitional,F=Frameset。
範  例

<table border="1">
 <thead>
  <tr><td>THEAD</td></tr>
 </thead>
 <tfoot>
  <tr><td>TFOOT</td></tr>
 </tfoot>
 <tbody>
  <tr><td>TBODY</td></tr>
 </tbody>
</table>

範例結果
THEAD
TFOOT
TBODY