HTML 教材：表格

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

• 每一列有 n 個格子，這些同列的格子都同高，又稱為這一列的高度。
• 每一行有 m 個格子，這些同行的格子都同寬，又稱為這一行的寬度。
• 一列的高度，由同列中最高的格子決定。
• 一行的寬度，由同行中最寬的格子決定。

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。

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

微積分小考成績

Number	Name	Quiz 1	Quiz 2	Quiz 3
8800001	趙錢孫	10	10	8
8800002	李周吳	9		10

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

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

<TABLE ALIGN=center WIDTH=80% BORDER>

ALIGN

它接受三種參數值：

left 、 right

此時等於宣告這個表格是浮動表格 (floating table)， 其效果等同於《圖片》那一節中介紹的浮動圖片， 請自行實驗。

center

按照 HTML 語言的定義，這個參數值應該令表格浮動置中。 也就是說，表格置於版面中央，而文字繞其左右排版。 不過這種排版方法似乎頗為怪異，所以似乎沒有瀏覽器真正按照這個定義來做。 大部分瀏覽器見到這個參數值， 就製造展示表格 (displayed table)。 有些瀏覽器會將表格之前的一段文字也置中， 所以最好寫

<BR><TABLE ALIGN=center ...>

或者

<P><TABLE ALIGN=center ...>

WIDTH

它接受兩種形態的參數值：n 或 k%。 其中 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 排版一張表格，列出自己的課表。