HTML再接再厲(十四)：基本表格旗標

你想要一個表格嗎？沒問題，這兒是卡通城目前住戶名單表格。

卡通城
小甜甜	國隆	唐老鴨
鐵雄	安東尼	珍珍
皮卡丘	柯南	加菲貓

別開玩笑了！這不是我想要的表格！

艾爾弗烈德在此發誓，絕對沒有開玩笑，上面真的是運用<TABLE>和</TABLE>旗標所製作出來的表格。不過你要的可能是：

卡通城
小甜甜	國隆	唐老鴨
鐵雄	安東尼	珍珍
皮卡丘	柯南	加菲貓

對嗎？你心目中的表格是這種畫好格子的，外邊還加框的吧！

基本表格旗標

凡事都得按步就班進行，製作表格也一樣，我們就利用卡通城住戶名單表格來介紹基本表格旗標：

怎麼這麼一大串啊?!別慌，仔細看一看，其實只有四種旗標在那反覆運用而已。讓我來一一介紹：

<TABLE> 表格的開始旗標。
<CAPTION> 和 </CAPTION> 表格標題旗標，它的預設方式是將標題文字置中。
<TR> 和 </TR> 表格的列旗標(Table Row)。
<TD> 和 </TD> 表格的資料旗標(Table Data)，它宣告每一小格的內容。
</TABLE> 表格的回復旗標。
要記維持旗標成雙成對哦！

註：在舊版的HTML語法中，<TR>和<TD>是可以不用加上回復旗標的，可是我建議你保持成雙成對的良好習慣。因為新版的Netscape瀏覽器(4.0以上)或火狐狸(Mozilla Firefox)，若是省略回復旗標，表格會變形 — 寬度、高度和對齊都跑掉了。(而且，你八成猜不出來是回復旗標在做怪，反覆檢查就是不知道錯在那裡。)

旗標解析

表格旗標的作法是設定一系列的小格子，每個小格子由<TD>宣告。(註：上面的語法中，每一個<TD>都自成一列，但瀏覽程式是每見到一個<TD>旗標，就往右方加入一個小格子，一直到遇見</TR>或<TR>旗標時，才往下增加一列。)

還記得小時候玩的井字旗吧？你需要九個小格子。所以用<TR>旗標開始第一列，再用三個<TD>旗標做出三個小格子，再用<TR>開始第二列……，直到第三列完成為止。再回頭看看上面的範例，是不是很容易瞭解啊！

由<TD>所設定的格子是上下對齊的，舉例而言，每一列的第二個<TD>都是一樣寬度，除非另有設定，否則就以其中最大寬度格子的寬度為所有格子的寬度。(真實生活中最強壯者勝利，HTML的世界也如此。)

漂亮！漂亮！

我要的是一個有畫格子還加上外框的表格！　別急，馬上告訴你。

電影屋
庫隆尼	馬克	羅蓓茲
摩爾	康納萊	泰勒
克勞馥	李安	林青霞

卡通城這會兒換成電影屋了，一成不變豈不讓你睡著了，不過方法是一樣的，就讓我們來看看表格旗標的基本屬性：

BORDER 宣告表格外框的寬度，以點數(pixels)計算。BORDER=3表示外框寬度為3個點的距離，BORDER=0則沒有框線。
CELLSPACING 宣告每一個格子的間距，以點數(pixels)計算。通常1點就足夠了，太大的數字(間隔)反而使表格失去美觀。
CELLPADDING 宣告每一個格子的內容與格線的間距，以點數(pixels)計算。你可以試幾個不同的數字，比較它們的效果，有時候愈大的數字愈好。

等等，還有一個 ALIGN 屬性呢？我們在新手上路中許多單元都提到過，如果你忘了就趕快去看看吧。ALIGN="CENTER"為向中對齊；你還可以自己試試看 ALIGN="LEFT" 和 ALIGN="RIGHT"，前者為向左對齊，而後者為向右對齊。你也可以設定某一個格子為向左對齊，另一個格子向右對齊，反正是依你的需要來決定。

網頁連結

如果能製作一個表格，每個小格子內都是一個網頁連結，那不是挺好的嗎！

安琪拉的小天地	艾爾弗烈德的蝙蝠洞
Ace Imports	Ace Jewelry

這個表格和前面所介紹的表格沒有什麼不同，只是在<TD>旗標內加上連結旗標而已。以左上角的格子為例：

<TD ALIGN=CENTER>
<A HREF="http://angelandtexas.blogspot.com/">安琪拉的小天地</A>
</TD>

此外，BORDER、CELLSPACING和CELLPADDING都設定為15點，好讓你看看大點數的邊框效果。

放置圖片

能不能在表格中放入圖片呢？　當然可以啦！

	<-- 不錯吧！
不錯吧！ -->

沒錯，就是這麼簡單，這個表格裡只需要一個小格子，所以CELLPADDING和CELLSPACING的屬性都可以省略，除非你希望圖片和邊框有一段距離，或是要更大的邊框。你當然可以那麼做，不過實在無此必要。

此外，<TD>旗標最好書寫在一行內，可以得到最好的相框效果。

結語

你現在應該已經學會基本表格旗標了，不妨適當運用在你的網頁中，需要加框的時候就加入適當寬度的框線，可以讓你的網頁看起來更專業。不過也不要加太多料，否則效果會適得其反哦！

本文配合HTML 4.0撰寫，新版HTML均可向前相容。

Alfred's Cave

快速連結

文章分類

最新文章

熱門文章

2009年11月1日星期日