一,、簡單表格制作

1,、 首先我們來看一個最簡單的表格：

代碼：

<TABLE BORDER=1>

<TR><TD>1</TD></TR>

</TABLE>

結(jié)果：

利用<TABLE>這個標簽來告訴電腦，這是一個表格,，至于 BORDER=1 這參數(shù)是設(shè)定此表格的框線粗細為 1,。一組<TR></TR>是設(shè)定一橫列的開始。一組<TD></TD>則是設(shè)定一個欄位,。當然,，文字就是要擺在這里面就是“1”的位置

注意：如果方格內(nèi)不寫“1” ,，則用<TR><TD></TD></TR>        或者<TR><TD><P></P></TD></TR>表示，其中：<P></P>是換行,、空格,、段落的意思。

<p>是段落的開始標志,，</p>是段落的結(jié)束標志 ,，比如要寫笑看風(fēng)云，是一個段落,，代碼可以這樣表示： <P>笑看風(fēng)云</P>

2,、現(xiàn)在我們再來增加二個格子：

代碼：

<TABLE BORDER=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

</TABLE>

結(jié)果：

3、看見沒有,，<TR></TR>沒有增加,，<TD></TD>卻增加了二組。那如果要再加上一列呢,？很簡單,，就像這樣：

代碼：

<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,、左右欄位合并:如何將 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é)果：

COLSPAN="3",，是“左右欄位合并”的屬性,，COLSPAN="3"的意思就是“這個欄位左右橫跨了3個欄位”，也正因如此,，本來的兩個<TD>都可以省掉了,，因為都被并掉了！

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與4合并成一個欄位,，那么被犧牲的是哪一個欄位呢,？沒錯就是下面那一個倒楣的4，我們看看上圖,，果然4已經(jīng)刪掉了,，而在1的<TD>標簽中則多了個生面孔ROWSPAN，這就是“上下欄位合并”的屬性，ROWSPAN=2的意思就是“這個欄位上下連跨了2個欄位”,。

三,、表格對齊設(shè)置

1、我可以自己設(shè)定表格的大小嗎,？當然可以,，您可以自由設(shè)定表格的“寬”及“高”喔！我們來制作一個寬100,、高60的表格,，做法如下：

代碼：

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR><TD>1</TD></TR>

</TABLE>

結(jié)果：

2、只要在<TD>加入 ALIGN=CENTER 這參數(shù),，讓1 回到中間

代碼：

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR><TD ALIGN=CENTER>1</TD></TR>

</TABLE>

結(jié)果：

此外,，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預(yù)設(shè)值）,，至于為什么要加在<TD>中呢？因為,，<TD>是一個欄位的意思,，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中,。

3,、既然可以置中，那么也可以控制表格內(nèi)文字靠上方,、靠下方嗎,？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內(nèi)物件靠上方對齊,。

代碼：

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>

</TABLE>

結(jié)果：

利用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é)果：

將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é)果：

將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é)果：

2,、表格除了可以設(shè)定底色外,，也可以用圖片來作背景嗎？當然可以，方法一樣簡單,，只要將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é)果：

將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é)果：

五、 表格框線設(shè)置

1,、如何設(shè)定表格粗細,？只要利用BORDER="粗細值"就行了。

代碼：

<TABLE BORDER=5>

<TR><TD>1</TD></TR>

</TABLE>

結(jié)果：

2,、如何設(shè)定表格顏色,？只要利用BORDERCOLOR="顏色碼"就行了

代碼：

<TABLE BORDER="5" BORDERCOLOR="#0080FF">

<TR><TD>1</TD></TR>

</TABLE>

結(jié)果：

3、另外,，我們也可以設(shè)定表格的陰影,、亮面顏色，讓表格看起來更有立體感喔,！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設(shè)定） BORDERCOLORDARK="顏色碼"（暗面設(shè)定）就行了,。

代碼：

<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">

<TR><TD>1</TD></TR>

</TABLE>

結(jié)果：

六、表格欄距設(shè)置

1,、我們可以利用CELLPADDING屬性自由設(shè)定表格內(nèi)文距離格線的距離,，這個屬性很好用，保持適當?shù)木嚯x,，看起來比較舒服,。一般而言內(nèi)定值為2，不過我建議設(shè)定為4比較漂亮,。

代碼：

<TABLE BORDER="1" CELLPADDING="10">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>

結(jié)果：

2,、我們可以利用CELLSPACING屬性設(shè)定表格欄位格線之間的距離。一般而言內(nèi)定值為2,，不過我通常習(xí)慣設(shè)為 0 ,。

代碼：

<TABLE BORDER="1" CELLSPACING="5">

<TR><TD>1</TD><TD>2</TD></TR>

</TABLE>

結(jié)果：

• 七，表格的立體化