【 表格欄位對齊位置設定 】
1. 首先我們來看一個最簡單的表格：
| 原始碼 | 呈現結果 | |
| <TABLE BORDER=1> <TR><TD>1</TD></TR> </TABLE> |
|
2. 利用<TABLE>這個標籤來告訴電腦，這是一個表格，至於
BORDER=1 這參數是設定此表格的框線粗細為 1。
一組 <TR></TR> 是設定一橫列的開始。
一組 <TD></TD> 則是設定一個欄位。當然，文字就是要擺在這裡面。
3. 現在我們再來增加二個格子：
| 原始碼 | 呈現結果 | |||
| <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE> |
|
看見沒有，<TR></TR>沒有增加，<TD></TD>卻增加了二組。
4. 那如果我要再加上一列呢？很簡單，就像這樣：
| 原始碼 | 呈現結果 | ||||||
| <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE> |
|
【 合併表格欄位 】
1. 並非所有的表格都是規規矩矩的只有幾欄、幾列而已，
有時候，我們還會希望能夠「合併欄位」，讓表格更美觀、更實用一點，
而談到「合併欄位」，我們就必須知道，合併的方向有兩種：
一種是上下合併（也就是橫列間的合併），
一種是左右合併（也就是直欄間的合併），
這兩種合併方式各有不同的屬性設定方法。
2. 左右欄位合併：基本上，您的表格已經學會囉！
接下來，咱們就來看看，如何將 1、2、3 格通通合併變成一大格：
| 原始碼 | 呈現結果 | ||||||
| <TABLE BORDER=1> <TR><TD COLSPAN=3>1</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE> |
| ||||||
您應該會發現，怎麼2、3都消失了？
只剩下1，而且該欄的<TD>標籤還多了一個陌生的臉孔COLSPAN="3"，
沒錯，這就是「左右欄位合併」的屬性，
COLSPAN="3"的意思就是「這個欄位左右橫跨了3個欄位」，
也正因如此，本來的兩個<TD> 都可以省掉了，因為都被併掉了嘛！
3. 上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，
將 1、4格通通合併變成一大格：
| 原始碼 | 呈現結果 | |||||
| <TABLE BORDER=1> <TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>5</TD><TD>6</TD></TR> </TABLE> |
|
有了上一次的經驗後，我們就知道，要合併欄位
就一定有些欄位會被「犧牲」掉（也就是那些被合併的欄位啦！），
這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？
沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，
而在1的 <TD> 標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，
ROWSPAN=2 的意思就是「這個欄位上下連跨了2個欄位」，
【 表格欄位對齊位置設定 】
1. 我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！
我們來製作一個寬100、高60的表格，做法如下：
| 原始碼 | 呈現結果 | |
| <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD>1</TD></TR> </TABLE> |
|
2. 哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？
當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：
| 原始碼 | 呈現結果 | |
| <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER>1</TD></TR> </TABLE> |
|
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、
利用 ALIGN=LEFT可以讓表格中物件置左（預設值），
至於為什麼要加在<TD>中呢？因為，<TD>是一個欄位的意思，
我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。
3. 既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？
可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。
| 原始碼 | 呈現結果 | |
| <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR> </TABLE> |
|
利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），
VALIGN=BOTTOM可以H讓表格中物件靠下方。
【 表格背景、底色設定 】
1. 表格可以設定底色嗎？
可以的不但表格可以，您也可以指定某欄或某列的顏色，
方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。
底下是指定整格表格背景顏色的方法：
| 原始碼 | 呈現結果 | ||||
| <TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
將BGCOLOR="顏色碼"加在<TR>中，可以指定「一列」的背景顏色：
| 原始碼 | 呈現結果 | ||||
| <TABLE BORDER="1" > <TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色：
| 原始碼 | 呈現結果 | ||||
| <TABLE BORDER="1" > <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
2. 表格除了可以設定底色外，也可以用圖片來作背景嗎？
當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱" 加到表格中就行了。
和表格背景顏色一樣，不但表格可以設定背景圖片，
您也可以指定某欄或某列的背景圖片：
| 原始碼 | 呈現結果 | ||||
| <TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色：
| 原始碼 | 呈現結果 | ||||
| <TABLE BORDER="1"> <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> |
|
【 表格框線設定 】
1. 如何設定表格粗細？只要利用BORDER="粗細值"就行了。
| 原始碼 | 呈現結果 | |
| <TABLE BORDER=5> <TR><TD>1</TD></TR> </TABLE> |
|
2. 如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。
| 原始碼 | 呈現結果 | |
| <TABLE BORDER="5" BORDERCOLOR="#0080FF"> <TR><TD>1</TD></TR> </TABLE> |
|
3. 另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！
只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定）
BORDERCOLORDARK="顏色碼"（暗面設定）就行了。
| 原始碼 | 呈現結果 | |
| <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR> </TABLE> |
|
【 表格欄距設定 】
1. 我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，
這個屬性很好用，保持適當的距離，看起來比較舒服。
一般而言內定值為2，建議設定為4比較漂亮。
| 原始碼 | 呈現結果 | ||
| <TABLE BORDER="1" CELLPADDING="10"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE> |
|
2. 我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。
一般而言內定值為2，通常習慣設為 0 。
| 原始碼 | 呈現結果 | ||
| <TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE> |
|
