HTML再接再厲(十六)：表格變化運用

每逢農曆年時，家家戶戶在大掃除之後，都會在門口張貼春聯，等待新年的來臨。

招財進寶
春 滿 乾 坤 福 滿 門	恭　賀 新　禧	天 增 歲 月 人 增 壽

COLSPAN屬性

喂！艾爾弗烈德，你怎麼把三個小格子合併成一個的啊？　這容易，不過先提點英文好了，Column —— 直行，Row —— 橫列，Span —— 展幅，上圖是將三個格子合成一個格子，也就是將三個直行合併成一個大直行，所以我們使用COLSPAN屬性(COLumn SPAN)。

屬性是放在旗標裡，我們有<TABLE>、<TR>和<TD>，那麼放在那一個裡面呢？　即然是合併小格子，每個小格子的資料是包含在<TD>旗標內，所以COLSPAN當然是放在<TD>裡面。我們來看看這段語法：

<TABLE WIDTH="300" BORDER="3" CELLSPACING="1" CELLPADDING="6">
 
<TR>
<TD ALIGN="CENTER" COLSPAN="3">招財進寶</TD>
</TR>
 
<TR>
<TD ALIGN="CENTER">春<BR>滿<BR>乾<BR>坤<BR>福<BR>滿<BR>門</TD>
<TD ALIGN="CENTER">恭　賀<BR>新　禧</TD>
<TD ALIGN="CENTER">天<BR>增<BR>歲<BR>月<BR>人<BR>增<BR>壽</TD>
</TR>
</TABLE>

• 表格是由許多直行(Column)和許多橫列(Row)構成。
• 注意第一組<TR>旗標(第一橫列)，裡面只有一組<TD>旗標(一個寬扁的大直行)，因為我們將三個小格子合併成一個格子，所以只需要一組<TD>旗標和COLSPAN屬性設定。
• 如果你設定COLSPAN=2，那麼這個合併的直行寬度將為兩行。若是如此，在本例中你可以在第一組<TR>旗標中再加上一組<TD>旗標。

ROWSPAN屬性

客廳	書房
	臥室

你應該猜得出來是怎麼做的吧！讓我們來印證一下：

<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="15">
 
<TR>
<TD ALIGN="CENTER" WIDTH="150" ROWSPAN="2">客廳</TD>
<TD ALIGN="CENTER" WIDTH="150">書房</TD>
</TR>
 
<TR>
<TD ALIGN="CENTER">臥室</TD>
</TR>>
 
</TABLE>

• 注意第二組<TR>旗標(第二橫列)，裡面只有一組<TD>旗標，因為我們將原先左下方的小格子向上合併了，所以只需要一組<TD>旗標。

WIDTH="__"屬性

WIDTH="__"是寬度屬性，它不只可以用在基本表格旗標中，也可以用在圖像旗標<IMG>(參考 新手入門：第六單元)、隔線旗標<HR>……等地方，你應該不會太陌生。

上例中，WIDTH="150"表示格子的寬度設定為150點；你也可以用WIDTH＝"20%"，表示格子格子的寬度設定為可用寬度的20%。

結語

希望COLSPAN和ROWSPAN沒把你搞昏了，如果你被它們弄得有點兒頭痛，我在這裡向你致歉。如果沒有，試試看你能不能作出下方表格：

CE	/	*	-
7	8	9	+
4	5	6
1	2	3	=
0		.

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