melody

　一、創建基本的表格

　　一個表由＜table＞開始， ＜/table＞結束，表的內容由 ＜tr＞,＜th＞和＜td＞定義。＜tr＞說明表的一個行，表有多少行就有多少個＜tr＞；＜th＞說明表的列數和相應欄目的名 稱，有多少個欄就有多少個＜th＞；＜td＞則填充由＜tr＞和 ＜th＞組成的表格。

　　表格重要的基本標記不多，但每個標記都有很多的屬性，考慮到一下子把這些屬性都列出來，可能讓初學者感到無從下手，所以我們還是從表格的外觀(即瀏覽器中顯示的表格的樣式)來了解最基本的屬性。

　　在講解之前，我們先來看看表格的基本構造。 下圖是一個3行3列的表格。

 

　　這里面有兩個概念要弄明白：表格與單元格。他們的關系是整體與局部的關系，如同砌墻的磚和砌好的墻一樣。在上面3行3列的表格中一共有9個單元格。由于我們后面將提到的表格屬性和單元格屬性有很多是相同的，所以一定要分清楚。前面已經說過表格的最基本標記為＜table＞、＜tr＞、＜td＞，可以先樹立這樣一個概念：描述整個表格的屬性標記放在＜table＞里，描述單元格的屬性標記放在＜tr＞、＜td＞里。 有這樣一個概念后，我們學習起來就可能簡單些。

　　1、表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色

　　表格以及單元格的大小是用“width=#”和“height=#”屬性說明，“width=#”表示寬，“height=#”表示高，，#是以象素或者百分比為單位的數字。表格邊框的寬度是用“border=#”屬性說明，，#為寬度值，單位是象素，表格邊框的顏色是用“bordercolor="#"屬性說明，#是16進制的6位數，格式為rrggbb，分別表示紅、 綠、蘭三色的分量。或者是16種已定義好的顏色名稱，參見文本顏色，單元格邊框的顏色屬性與表格的相同，但只適用于IE。下面是一個寬為300,高為80,邊框寬為4,邊框顏色為“FF0000”的一行兩列表格，其中第一個單元格的寬為200,高為80，第二個單元格的邊框顏色為“0000FF”。

　　代碼如下：
＜table border="4" width="300" height="80" bordercolor="#FF0000"＞
＜tr＞
＜td width="200" height="80"＞ ＜/td＞
＜td bordercolor="#0000FF"＞ ＜/td＞
＜/tr＞
＜/table＞

　　2、表格的水平擺放位置
　　表格的水平擺放位置是用align="#" 屬性說明的，#為left(左對齊), right(右對齊), center(居中)。分別見下例，注意這三個表格與邊界的位置關系：

左對齊

center

右對齊

　　第三個表格的代碼如下：
＜table width="80" border="1" align="right" height="30"＞
＜tr＞
＜td＞右對齊＜/td＞
＜/tr＞
＜/table＞

　　3、單元格里內容的位置屬性

　　水平對齊方式，用align="#"屬性說明，#為left(左對齊), right(右對齊), center(居中)；垂直對齊方式，用valign="#"屬性說明，#為top(上對齊), bottom(下對齊), middle(居中)。分別見下例，注意單元格里的內容與邊框的的位置關系：

　　水平對齊方式：

內容左對齊

內容居中

內容右對齊

　　代碼如下：
＜table width="450" border="1"＞
＜tr＞
＜td width="150"＞
＜div align="left"＞內容左對齊＜/div＞
＜/td＞
＜td width="150"＞
＜div align="center"＞內容居中＜/div＞
＜/td＞
＜td＞
＜div align="right"＞內容右對齊＜/div＞
＜/td＞
＜/tr＞
＜/table＞

　　垂直對齊方式

內容上對齊

內容居中

內容下對齊

　　代碼如下：
＜table width="150" border="1"＞
＜tr＞
＜td height="40" width="146" valign="top"＞內容上對齊＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="middle"＞內容居中＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="bottom"＞內容下對齊＜/td＞
＜/tr＞
＜/table＞

　　4、表格的背景色、背景圖片，單元格的背景色、背景圖片

　　背景色屬性：bgcolor="#" ，背景圖片屬性：background="#"。

　　見下例：

　　代碼如下：
＜table width="450" border="1" bgcolor="#539996" bordercolor="#FFFFFF" height="90"＞
＜tr＞
＜td＞ ＜/td＞
＜td background="Back01.gif"＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td bgcolor="#FF0000"＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞

　　說明：在上例中，整個表格的背景色是 bgcolor="#539996" ，第一行第二列的單元格背景圖片是 background="Back01.gif" ，第三行第二列的單元格背景色是 bgcolor="#FF0000" ,根據顯示結果可以看出：設置表格的背景色后再設置單元格的背景色或背景圖片，將優先顯示單元格的屬性。

　　5、表格屬性cellspacing、cellpadding

    5、表格屬性cellspacing、cellpadding

　　cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字，表示單元格間隙所占的像素點數。

　　我們來看下面的兩個表格：

　　　
　　上面第一個表格的單元格之間沒有空白距離，而第二個的單元格之間有很大的空白距離，我們來比較一下他們的源代碼：
　　第一個表格的代碼：
＜table width="200" cellspacing="0" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞

　　第二個表格的代碼：
＜table width="200" cellspacing="8" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞

　　比較代碼，上邊兩個表格中只有 cellspacing 的設置不同，一個為“0”，一個為“8”，顯示的結果就是第一個表格的每個單元格之間的距離為0(在本例中由于我們為了顯示的方便，將表格邊框設為“1”，所以單元格的真實距離是“2”，若將表格邊框設為“0”，則單元格　的距離就是0了，第二個單元格同理)，第二個表格的每個單元格之間的距離為8。

　　cellpadding屬性用來指定單元格內容與單元格邊界之間的空白距離的大小。此屬性的參數值也是數字，表示單元格內容與上下邊界之間空白距離的高度所占像素點數以及單元格內容與左右邊界之間空白距離的寬度所占的像素點數。我們先來看看這個例子:

　　我們來看下面兩個表格：

網頁教學網

網頁教學網

　　
　　第一個表格單元格的內容與單元格邊界之間沒有空白距離，而第二個表格單元格的內容與單元格邊界之間有空白距離，我們來比較一下他們的源代碼：
　　第一個表格的代碼：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="０"＞
＜tr＞
＜td width="120"＞網頁陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞


　　第二個表格的代碼：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15"＞
＜tr＞
＜td width="120"＞網頁陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞

　　兩個表格只有紅色部分代碼不同。第一個表格中"網頁陶吧"這幾個字離它所在的單元格為0,那是因為設置了cellpadding="0"的原因.第一個表格中的"網頁陶吧"這幾個字離它所在的單元格比較遠，那是因為cellpadding="15",也就是說"網頁陶吧"離它所在的單元格的邊界的距離為20像素。簡單的說,cellpadding的值等于多少,那表格內的單元格從自身邊界開始向內保留多少空白,單元格里的元素永遠都不會進入那些空白里。

　　我們在以后的篇幅中會大量用到這兩個屬性，所以請大家不要弄混亂了, 為了形象的理解，請參考下圖：