通用HTML(6)-【表格篇】

表格是除了文字和圖片之外,網路上最常被使用的一種表現方式。在CSS尚未出現之前,網頁的排版是很不容易地,因此早期的網頁設計師,都會利用表格來進行排版。事實上即使到了現在,依然有很多網頁是透過表格來排版的,因為表格式的排版方法比較簡單,而且不容易因為使用者的瀏覽器不同,導致不同的顯示結果(請參考CSS介紹)。即使不用於網頁排版,表格仍然是一種常見的資料呈現方式,因此學習HTML的人一定要學會它。

與表格相關的標籤很多,但其實一定會用到的只有

、和的子元素,代表此列要插入幾個欄位。每一對標籤代表一格(a cell)。

屬性:

  • align="水平位置(left | center | right | justify | char)":指定儲存格內容的水平位置,不建議使用,已漸漸被CSS取代。
  • background="背景圖片位置":設定儲存格的背景圖片,不建議使用,已漸漸被CSS取代。
  • bgcolor="顏色":設定儲存格的背景顏色,不建議使用,已漸漸被CSS取代。
  • bordercolor="顏色":設定儲存格框線的顏色。
  • bordercolordark="顏色":設定儲存格框線暗部的顏色。
  • bordercolorlight="顏色":設定儲存格框線亮部的顏色。
  • class="類別":指定物件類別。
  • colspan="合併欄位數量":向右合併n個儲存格。
  • id="物件ID":指定儲存格所屬ID,在同一個頁面中ID不能重覆。
  • height="高度":指定儲存格高度,不建議使用,已漸漸被CSS取代。
  • rowspan="合併列的數量":向下合併n個儲存格。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(middle | top | bottom | baseline)":指定儲存格內容的垂直位置,不建議使用,已漸漸被CSS取代。
  • width=" 寬度":指定儲存格的寬度,不建議使用,已漸漸被CSS取代。

【範例】

三個標籤,其它的都不是必要的標籤,所以會比較少被使用。

元素標籤

table(插入表格)、tr(表格列)、td(表格欄位)、caption(表格標題)、thead(表格標題列)、tbody(表格主體)、tfoot(表格註腳列)、th(欄位標題)、col(設定欄位屬性)、colgroup(欄位群組)

caption Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:表格的標題,必須緊接在

標籤之後。

屬性:

  • align="位置(top | bottom | left | right)":指定標題的位置。
  • class="類別":指定物件類別。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(top | bottom)":指定標題的垂直位置,不建議使用,已漸漸被CSS取代。

【範例】

<caption align="left">標題靠左</caption>
<caption align="bottom">標題在下</caption>

【結果】

標題靠左
   
   
標題在下
   
   

table Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入表格。

屬性:

  • align="水平位置(left | center | right | bleedleft | bleedright | justify)":指定表格的水平位置,不建議使用,已漸漸被CSS取代。
  • background="背景圖片位置":設定表格的背景圖片,不建議使用,已漸漸被CSS取代。
  • bgcolor="顏色":設定表格的背景顏色,不建議使用,已漸漸被CSS取代。
  • border="表格框線寬度":設定表格的框線寬度。
  • bordercolor="顏色":設定表格框線的顏色。
  • bordercolordark="顏色":設定表格框線暗部的顏色。
  • bordercolorlight="顏色":設定表格框線亮部的顏色。
  • cellpadding="間距":設定儲存格內容與邊框的距離,預設值為1。
  • cellspacing="間距":設定儲存格之間的距離,預設值為2。
  • class="類別":指定物件類別。
  • height="高度":指定物件高度,不建議使用,已漸漸被CSS取代。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • width=" 寬度":指定表格的寬度,不建議使用,已漸漸被CSS取代。

【範例】

1 4
2 5
3 6

【結果】

1 4
2 5
3 6

tbody Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:指定表格的主體,即表格的主要內容。一個表格只能有一個表格主體,並包含一到多列。

屬性:

  • align="水平位置(left | center | right | justify | char)":指定表格的水平位置,不建議使用,已漸漸被CSS取代。
  • bordercolor="顏色":設定表格框線的顏色。
  • class="類別":指定物件類別。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(middle | top | bottom | baseline)":指定表格的垂直位置,不建議使用,已漸漸被CSS取代。

【範例】

title1 title2
1 2
3 4
foot1 foot2

【結果】

title1 title2
1 2
3 4
foot1 foot2

td Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入儲存格並指定內容,是

此列有2格
向下合併 此列有3格
此列有2格

【結果】

此列有2格
向下合併 此列有3格
此列有2格

tfoot Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:指定表格的註腳列,即表格的表尾。一個表格只能有一個註腳列,放置與表格主體下方,並包含一到多列。

屬性:

  • align="水平位置(left | center | right | justify | char)":指定表格的水平位置,不建議使用,已漸漸被CSS取代。
  • bordercolor="顏色":設定表格框線的顏色。
  • class="類別":指定物件類別。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(middle | top | bottom | baseline)":指定表格的垂直位置,不建議使用,已漸漸被CSS取代。

【範例】

title1 title2
1 2
3 4
foot1 foot2

【結果】

title1 title2
1 2
3 4
foot1 foot2

th Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:表格欄位的標題,是的子元素,位於每一欄的最上方或最左邊,通常以粗體置中表示。與的使用方式相同。

屬性:

  • align="水平位置(left | center | right | justify | char)":指定儲存格內容的水平位置,不建議使用,已漸漸被CSS取代。
  • background="背景圖片位置":設定儲存格的背景圖片,不建議使用,已漸漸被CSS取代。
  • bgcolor="顏色":設定儲存格的背景顏色,不建議使用,已漸漸被CSS取代。
  • bordercolor="顏色":設定儲存格框線的顏色。
  • bordercolordark="顏色":設定儲存格框線暗部的顏色。
  • bordercolorlight="顏色":設定儲存格框線亮部的顏色。
  • class="類別":指定物件類別。
  • colspan="合併欄位數量":向右合併n個儲存格。
  • id="物件ID":指定儲存格所屬ID,在同一個頁面中ID不能重覆。
  • height="高度":指定儲存格高度,不建議使用,已漸漸被CSS取代。
  • rowspan="合併列的數量":向下合併n個儲存格。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(middle | top | bottom | baseline)":指定儲存格內容的垂直位置,不建議使用,已漸漸被CSS取代。
  • width=" 寬度":指定儲存格的寬度,不建議使用,已漸漸被CSS取代。

【範例】

table title1-1 title1-2
title2-1 1 2
title2-2 3 4

【結果】

table title1-1 title1-2
title2-1 1 2
title2-2 3 4

thead Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:指定表格的標題列,即表格的列首標題。一個表格只能有一個標題列,並包含一到多列。

屬性:

  • align="水平位置(left | center | right | justify | char)":指定表格的水平位置,不建議使用,已漸漸被CSS取代。
  • bordercolor="顏色":設定表格框線的顏色。
  • class="類別":指定物件類別。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(middle | top | bottom | baseline)":指定表格的垂直位置,不建議使用,已漸漸被CSS取代。

【範例】

title1 title2
1 2
3 4
foot1 foot2

【結果】

title1 title2
1 2
3 4
foot1 foot2

tr Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入表格列,是

的子元素。

屬性:

  • align="水平位置(left | center | right | justify | char)":指定儲存格內容的水平位置,不建議使用,已漸漸被CSS取代。
  • bgcolor="顏色":設定儲存格的背景顏色,不建議使用,已漸漸被CSS取代。
  • bordercolor="顏色":設定儲存格框線的顏色。
  • bordercolordark="顏色":設定儲存格框線暗部的顏色。
  • bordercolorlight="顏色":設定儲存格框線亮部的顏色。
  • class="類別":指定物件類別。
  • id="物件ID":指定儲存格所屬ID,在同一個頁面中ID不能重覆。
  • height="高度":指定儲存格高度,不建議使用,已漸漸被CSS取代。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。
  • valign="垂直位置(middle | top | bottom | baseline)":指定儲存格內容的垂直位置,不建議使用,已漸漸被CSS取代。
  • width=" 寬度":指定儲存格的寬度,不建議使用,已漸漸被CSS取代。

【範例】

【結果】