一、簡(jiǎn)單表格制作
舉個(gè)例子來(lái)說(shuō)，如果今天我們要做一個(gè)3欄2列的表格，在WORD中，只要設(shè)定表格為3欄、2列就完成了，不過(guò)，在網(wǎng)頁(yè)中做一個(gè)3欄2列的表格，可是要分成好幾個(gè)步驟的，第一個(gè)步驟，利用<TABLE></TABLE>標(biāo)簽告訴電腦我要做一個(gè)表格；第二個(gè)步驟，利用一組<TR></TR>標(biāo)簽先做一個(gè)橫列，然后在橫列中利用三組<TD></TD>標(biāo)簽再分出三欄；第三個(gè)步驟，重復(fù)第二個(gè)步驟，再做一橫列然后再分三欄，如此才能得到一個(gè)3欄2列的表格。聽(tīng)不太懂嗎？沒(méi)關(guān)系，以下咱們就來(lái)慢慢的看個(gè)仔細(xì)：
A、 首先我們來(lái)看一個(gè)最簡(jiǎn)單的表格：
代碼：
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
結(jié)果：
1
利用<TABLE>這個(gè)標(biāo)簽來(lái)告訴電腦，這是一個(gè)表格，至于 BORDER=1 這參數(shù)是設(shè)定此表格的框線粗細(xì)為 1。一組<TR></TR>是設(shè)定一橫列的開(kāi)始。一組<TD></TD>則是設(shè)定一個(gè)欄位。當(dāng)然，文字就是要擺在這里面。
B 、現(xiàn)在我們?cè)賮?lái)增加二個(gè)格子：
代碼：
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
結(jié)果：
1 2 3
C 、看見(jiàn)沒(méi)有，<TR></TR>沒(méi)有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡(jiǎn)單，就像這樣：
代碼：
<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>
結(jié)果： 1 2 3
4 5 6
二、合并表格欄位
1、左右欄位合并:如何將 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>
結(jié)果：
1
4 5 6
您應(yīng)該會(huì)發(fā)現(xiàn)，怎么2、3都消失了？只剩下1，而且該欄的<TD>標(biāo)簽還多了一個(gè)陌生的臉孔COLSPAN="3"，沒(méi)錯(cuò)，這就是“左右欄位合并”的屬性，COLSPAN="3"的意思就是“這個(gè)欄位左右橫跨了3個(gè)欄位”，也正因如此，本來(lái)的兩個(gè)<TD>都可以省掉了，因?yàn)槎急徊⒌袅寺铮?div style="height:15px;">
2、上下欄位合并：如何上下合并，將 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>
結(jié)果：
1 2 3
5 6
有了上一次的經(jīng)驗(yàn)后，我們就知道，要合并欄位就一定有些欄位會(huì)被“犧牲”掉（也就是那些被合并的欄位啦?。?，這次我們要“上下合并”，我們將1與4合并成一個(gè)欄位，那么被犧牲的是哪一個(gè)欄位呢？沒(méi)錯(cuò)就是下面那一個(gè)倒楣的4，我們看看上圖，果然4已經(jīng)刪掉了，而在1的<TD>標(biāo)簽中則多了個(gè)生面孔R(shí)OWSPAN，這就是“上下欄位合并”的屬性，ROWSPAN=2的意思就是“這個(gè)欄位上下連跨了2個(gè)欄位”。
三、表格對(duì)齊設(shè)置
1、我可以自己設(shè)定表格的大小嗎？當(dāng)然可以，您可以自由設(shè)定表格的“寬”及“高”喔！我們來(lái)制作一個(gè)寬100、高60的表格，做法如下：
代碼：
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
結(jié)果：
1
2、哎呀！怎么 1 老是在表格的左邊呢？可以弄到中間嗎？當(dāng)然可以，只要在<TD>加入 ALIGN=CENTER 這參數(shù)即可：
代碼：
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
結(jié)果：
1
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預(yù)設(shè)值），至于為什么要加在<TD>中呢？因?yàn)椋?lt;TD>是一個(gè)欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。
3、既然可以置中，那么也可以控制表格內(nèi)文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內(nèi)物件靠上方對(duì)齊。
代碼：
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
結(jié)果：
1
利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預(yù)設(shè)值），VALIGN=BOTTOM可以H讓表格中物件靠下方。
四、表格背景設(shè)置
1、那么表格可以設(shè)定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：
代碼：
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
結(jié)果：
1 2
3 4
將BGCOLOR="顏色碼"加在<TR>中，可以指定“一列”的背景顏色：
代碼：
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
結(jié)果：
1 2
3 4
將BGCOLOR="顏色碼"加在<TD>中，可以指定“一欄”的背景顏色：
代碼：
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
結(jié)果：
1 2
3 4
2、表格除了可以設(shè)定底色外，也可以用圖片來(lái)作背景嗎？當(dāng)然可以，方法一樣簡(jiǎn)單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設(shè)定背景圖片，您也可以指定某欄或某列的背景圖片：
代碼：
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
結(jié)果：
1 2
3 4
將BACKGROUND="圖片名稱"加在<TD>中，可以指定“一欄”的背景顏色：
代碼：
<TABLE BORDER="1">
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
結(jié)果： 1 2
3 4
五、 表格框線設(shè)置
1、如何設(shè)定表格粗細(xì)？只要利用BORDER="粗細(xì)值"就行了。
代碼：
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
結(jié)果：
1
2、如何設(shè)定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了
代碼：
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
結(jié)果：
1
3、另外，我們也可以設(shè)定表格的陰影、亮面顏色，讓表格看起來(lái)更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設(shè)定） BORDERCOLORDARK="顏色碼"（暗面設(shè)定）就行了。
代碼：
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
結(jié)果：
1
六、表格欄距設(shè)置
1、我們可以利用CELLPADDING屬性自由設(shè)定表格內(nèi)文距離格線的距離，這個(gè)屬性很好用，保持適當(dāng)?shù)木嚯x，看起來(lái)比較舒服。一般而言內(nèi)定值為2，不過(guò)我建議設(shè)定為4比較漂亮。
代碼：
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
結(jié)果：
1 2
2、我們可以利用CELLSPACING屬性設(shè)定表格欄位格線之間的距離。一般而言內(nèi)定值為2，不過(guò)我通常習(xí)慣設(shè)為 0 。
代碼：
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
結(jié)果：
1 2
