表格設定

§ 表格的設定

在網頁設計時最令人頭痛的問題就是版面的安排了，尤其碰到「即視」根本就「非所得」的情況。因此，表格便成了網頁版面編排不可缺少的一項利器。
將圖、文利用表格妥善安排可以美化我們的版面，還可以利用隱形表格作成無接縫的拼貼圖。
在製作表格時，最好不要省略任何相關的標籤，以免造成不可預期的錯誤。

§ 基本格式：

<table>
<tr><td>一行一列</td></tr>
</table>

＊範例 (基本表格)

§ <table>....</table>

這一組標籤定義表格的開始及結束。

§ 表格的 border 屬性

border 可以設定表格的外框寬度。單位：像素 (pixels)
border="0" 時，可以產生一個隱形表格，是版面編排的一種常用技巧。
沒有寫上 boder 屬性時，代表沒有框線。

＊範例 (3列2行的表格，框線大小是1)

<table border="1">
<tr> <td>第1列第1行</td> <td>第1列第2行</td> </tr>
<tr> <td>第2列第1行</td> <td>第2列第2行</td> </tr>
<tr> <td>第3列第1行</td> <td>第3列第2行</td> </tr>
</table>

§ 表格的 bordercolor 屬性

bordercolor 可以設定表格的框線顏色。
語法：

<table border="1" bordercolor="#顏色碼" >

您還可以用 bordercolorlight="#顏色碼" 來指定亮框邊(左、上方)的顏色。
您還可以用 bordercolordark="#顏色碼" 來指定暗框邊(右、下方)的顏色。
語法：

<table border="1" bordercolorlight="#顏色碼" bordercolordark="#顏色碼">

＊範例 (設定表格的框線、亮框邊及暗框邊)

§ 表格的 bgcolor 屬性

bgcolor可以指定表格內的背景色。
顏色的指定可以是十六進位值或英文顏色名稱。

＊範例 (將表格框線設為紅色，背景色設為浪漫的粉紅色)

<table border="1" bordercolor="red" bgcolor="#FFCCFF">

§ 表格的 background 屬性

除了可以用bgcolor外，還可以用background屬性指定背景圖檔。
同時指定 bgcolor 及 background 時，以 background 的設定為主。
語法：

<table border="1" background="圖檔位址">

所用圖檔最好是無接縫的背景圖。否則，如果圖檔的尺寸小於表格，會以拼貼方式佔滿表格！

§ 表格的 width、height 屬性

width、height 可以分別設定表格的寬度及高度。
可以用兩種方式來設定寬與高：

1.絕對方式。單位：像素(pixels)。
2.相對方式。單位：百分比(%)。

若沒設定width及height的值，表示剛好容納表格資料的寬與高。
寬與高的設定不可小於資料的大小，否則所設定的值無效。
採相對方式來設定，表格大小會瀏覽器的窗視自動調整，較有彈性。

＊範例 (自動調整大小的表格)

語法：

<table border="1" width="100%" height="100%">
<tr> <td>表格圖文</td> </tr>
</table>

§ 表格的 align 屬性

align可以設定表格的版面位置。

align="left"：表格靠左(預設值)
align="center"：表格置中
align="right"：表格靠右

此處是設定表格的版面位置與儲存格內文字的對齊無關，不要搞混了！
語法：

表格靠左
<table border="1" align="left">
<tr> <td>表格文字</td> </tr>
</table>
表格置中
<table border="1" align="center">
<tr> <td>表格文字</td> </tr>
</table>
表格靠右
<table border="1" align="right">
<tr> <td>表格文字</td> </tr>
</table>

＊範例 (表格的版面位置)

§ <caption>....</caption>

定義表格的標題。
表格標題的預設位置是在表格的中央。
<caption>...</caption>可以放在<table>...</table>中間的任一位置。
利用 align 屬性，可以將表格標題放在表格的上方或下方。
語法：(預設是在上方)

<caption align=" top | bottom ">

＊範例 (表格的標題位置)

§ <tr>....</tr>

每增加一組<tr>...</tr>表示增加一列(橫向)。
<tr>....</tr>中間可以包含<th>及<td>標籤，分別代表儲存格的標題與儲存格內容。

＊範例 (三列的表格)

利用 align 屬性，可以設定整列的資料水平對齊方式。
語法：

<tr align="left"> ：整列靠左對齊(設預值)。
<tr align="center">：整列置中對齊。
<tr align="right"> ：整列靠右對齊。

利用 valign 屬性，可以設定整列的資料垂直對齊方式。
語法：

<tr valign="top"> ：整列靠上對齊。
<tr valign="middle"> ：整列置中對齊。
<tr valign="bottom"> ：整列靠下對齊。

＊範例 (整列資料對齊方式的設定)

利用 bgcolor 屬性，可以設定整列的背景色。
指定顏色可以是十六進位的色碼或英文名稱。
語法：

<tr bgcolor="色碼">

＊範例 (整列背景色的設定)

§ <th>....</th>

定義儲存格的標題(欄位的標題)。
自動設為粗體、置中的文字。
通常用在表格的第一列或第一欄上。
除了上面不同外，<th>和底下<td>的屬性設定幾乎是相同的，不再贅述。

＊範例 (欄位的標題)

§ 儲存格

在網頁製作中表格的作法都是先用<tr>....</tr>增加一列，再把這一列分成n個用<td>....</td>標籤所組成的儲存格。
因此，我們都是看到<td>...</td>是包含在<tr>...</tr>中間。

§ <td>....</td>

每增加一組<td>...</td>表示增加一欄(縱向)。
<td>標籤必需配合<tr>標籤使用。
每一列有多少欄，就是由<td>來決定的。
每一列的欄位數，要相同。否則會出現怪異的表格。

＊範例 (怪怪的表格，每列的儲存格數不一的結果)

§ width、height 屬性

和上述表格的 width 和 height 屬性雷同，不同的是這裏的設定儲存格。絕對單位(pixels)當然沒問題，但使用相對單位(%)時要注意，這裏是相對於表格而言。
例如，將儲存格的寬度設為80%，是指這個儲存格的寬度是佔整個表格寬度的80%(不是整個版面的80%)。
儲存格若不設定這兩個值，會以整個表格的寬和高平均分配給每個儲存格。
當您設定儲存格的高和寬時，所在的列和行會一起更改。

＊範例 (儲存格的寬、高設定)

＊ Tips：

如果表格不設定寬、高，在儲存格又不設定它們，所代表的意義便是隨資料調整(剛好是資料的寬、高)。

§ align、vlign 屬性

align 可以設定儲存格內容的水平對齊位置
語法：

<td align="left"> ：靠左對齊(設預值)。
<td align="center">：置中對齊。
<td align="right"> ：靠右對齊。

valign 可以設定儲存格內容的垂直對齊位置
語法：

<td valign="top"> ：靠上對齊。
<td valign="middle"> ：置中對齊。
<td valign="bottom"> ：靠下對齊。

＊範例 (儲存格的對齊設定)

§ border、bordercolor、bgcolor、background 屬性

這些屬性也和表格中的設定雷同。只是這裏設定的對象是「儲存格」罷了。
不管表格設定了哪些屬性，只要在儲存格中又作了單獨的設定，就會以儲存格為準。

＊範例 (表格與儲存格的設定關係)

§ colspan、rowspan 屬性

這兩個屬性是用來「合併儲存格」的。colspan 屬性是水平合併，rowspan 屬性是垂直合併。

＊範例 (合併儲存格範例)

§ cellpadding 屬性

cellpadding 屬性，可以設定儲存格內容和框線間的留白距離。
預設值是1pixes(像素)。

＊範例 (儲存格內容與框線間的距離)

§ cellspacing 屬性

cellspacing 屬性，可以設定儲存格間框線的距離。
預設值是1pixes(像素)。

＊範例 (儲存格間框線的距離)

§ 利用表格作出來的按鈕

資料來源：第三波出版的「純手工打造--黃金網頁」。
網友若真想學好 HTML 語法，這真是一本好書，值得推薦給網友作參考。
發揮巧思，表格竟然也能作出如此漂亮的按鈕！

＊範例