HTML 教材:表格

表格是用 TABLE 環境排版出來的。 這個環境將資料排列成 m 列 (橫者為列) n 行 (直者為行) 的陣列, 稱為 m 乘 n 陣列或表格;其中 m 和 n 是正整數。 作者要自己注意列數和行數的一致性:亦即每列要有同樣多個格子、 每行也要有同樣多個格子。瀏覽器在這方面未必會全自動的幫您檢查。 m 乘 n 表格共有 m*n 個格子:

指稱格子位置的術語和指稱矩陣相同, 我們用 (i, j) 表示第 i 列的第 j 個格子。

TABLE 環境裡面可以再放幾種其他的環境, 這一節只介紹兩種可以放在 TABLE 裡面的兩種環境:CAPTION 和 TR。

CAPTION 中寫著這個表格的標題、介紹或字幕。 TR (Table Row) 環境則代表表格中一列的資料。 <TR> 照理說也要用 </TR> 結束, 但是下一列的開始就自動結束上一列,所以可以不寫。 有些特殊情況一定要寫 </TR>, 例如利用表格來分割圖片的時候。留到下一篇再說。

在每一列裡面,再用 TH (Table Heading) 或 TD (Table Data) 環境來定義每個格子內的資料。 TH 和 TD 的結束標籤 </TH></TD> 也都可以省略。 所以,一張表格的基本寫法是

<TABLE 跟著一些參數>
<CAPTION> 表格的標題,這一個環境可以不寫 </CAPTION>
<TR> 這是第一列 </TR>
<TR> 這是第二列 </TR>
<TR> 這是第三列,依此類推 </TR>
</TABLE>

在 TR 環境內,用 TH 或是 TD 環境定義格子內的資料。 如果一個格子是空的,最好輸入一個 <BR>。 如果一個格子不是空的,它的內容稱為一個元素 (element 或 entry)。 在 TH 和 TD 裡面可以包含幾乎所有被 BODY 環境接受的其他環境, 包括 P 和 H1--H6 在內。 TH 和 TD 的意思其實差不多, 只是顧名思義,TH 放的是一行或一列的標題, 通常放在表格的第一列或第一行。 而 TD 就是普通的表格資料。

若以資料庫的術語稱呼,則同列的格子稱為一資料 (record), 同行的格子稱為一個欄位 (field)。 所以放在第一列的 TH 又稱為欄位名稱 (field name)。 表格中可以沒有 TH。

以下是一個表格範例,請讀者檢視本教材之原始碼, 對照著排版結果來看。

微積分小考成績
NumberNameQuiz 1Quiz 2Quiz 3
8800001趙錢孫10108
8800002李周吳9
10

以上是個非常單純的 3 乘 5 表格,其中第一列和第一行使用了 TH 來定義格子內容, 其他格子都用了 TD。第 (3,4) 格是空的。

前面的微積分小考成績表的 TABLE 環境是如此開始的:

<TABLE ALIGN=center WIDTH=80% BORDER>
它用了三個參數,我們解釋如下。
ALIGN
它接受三種參數值:
leftright
此時等於宣告這個表格是浮動表格 (floating table), 其效果等同於《圖片》那一節中介紹的浮動圖片, 請自行實驗。
center
按照 HTML 語言的定義,這個參數值應該令表格浮動置中。 也就是說,表格置於版面中央,而文字繞其左右排版。 不過這種排版方法似乎頗為怪異,所以似乎沒有瀏覽器真正按照這個定義來做。 大部分瀏覽器見到這個參數值, 就製造展示表格 (displayed table)。 有些瀏覽器會將表格之前的一段文字也置中, 所以最好寫
<BR><TABLE ALIGN=center ...>
或者
<P><TABLE ALIGN=center ...>
WIDTH
它接受兩種形態的參數值:nk%。 其中 n 是一個正整數,表示陣列的排版寬度是 n 個像素。 這種絕對指令是非常危險的,應盡量避免。 而 k 是介於 0 和 100 之間 (含) 的整數, 表示陣列的寬度是版面 (或瀏覽器視窗) 寬度的百分之 k。 如果沒有寫 WIDTH 這個參數名,則由表格的內容來決定其寬度。
BORDER
它接受正整數 n 為參數值, 令表格邊線的寬度是 n 個像素。 內定值是 1,所以寫 BORDER 就等於寫了 BORDER=1。 但是,如果連 BORDER 這個參數名都沒寫,就表示不要印邊線出來。 這就好像說 BORDER=0 一樣。

上面那個表格的標題是這樣排版的:

<CAPTION>微積分小考成績</CAPTION>
它的第一列是這樣排版的:
<TR><TH>Number<TH>Name<TH>Quiz 1<TH>Quiz 2<TH>Quiz 3</TR>
而第二列是這樣排版的:
<TR><TH>8800001<TD>趙錢孫<TD>10<TD>10<TD>8</TR>
第三列是這樣:
<TR><TH>8800002<TD>李周吳<TD>9<TD><BR><TD>10</TR>

TABLE 可以設計得非常繁複,並且用來做一些意想不到的排版功能。 就連 TR 和 TD、TH 環境都還有些複雜的參數。 但是我們暫時只學到這裡,到了下一篇再深入。

習題

  1. 請用 HTML 排版一張表格,列出五位同學的學號、姓名、性別和手機號碼。
  2. 請用 HTML 排版一張表格,列出自己的課表。
[BCC16-7]
單維彰 (1999/12/20) --- 01/03/11, 03/11/20 (單)
[Prev] [Next] [Up]