一、創(chuàng)建基本的表格
一個(gè)表由＜table＞開始， ＜/table＞結(jié)束，表的內(nèi)容由 ＜tr＞,＜th＞和＜td＞定義。＜tr＞說明表的一個(gè)行，表有多少行就有多少個(gè)＜tr＞；＜th＞說明表的列數(shù)和相應(yīng)欄目的名 稱，有多少個(gè)欄就有多少個(gè)＜th＞；＜td＞則填充由＜tr＞和 ＜th＞組成的表格。
表格重要的基本標(biāo)記不多，但每個(gè)標(biāo)記都有很多的屬性，考慮到一下子把這些屬性都列出來，可能讓初學(xué)者感到無從下手，所以我們還是從表格的外觀(即瀏覽器中顯示的表格的樣式)來了解最基本的屬性。
在講解之前，我們先來看看表格的基本構(gòu)造。 下圖是一個(gè)3行3列的表格。
這里面有兩個(gè)概念要弄明白：表格與單元格。他們的關(guān)系是整體與局部的關(guān)系，如同砌墻的磚和砌好的墻一樣。在上面3行3列的表格中一共有9個(gè)單元格。由于我們后面將提到的表格屬性和單元格屬性有很多是相同的，所以一定要分清楚。前面已經(jīng)說過表格的最基本標(biāo)記為＜table＞、＜tr＞、＜td＞，可以先樹立這樣一個(gè)概念：描述整個(gè)表格的屬性標(biāo)記放在＜table＞里，描述單元格的屬性標(biāo)記放在＜tr＞、＜td＞里。 有這樣一個(gè)概念后，我們學(xué)習(xí)起來就可能簡(jiǎn)單些。
1、表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色
表格以及單元格的大小是用“width=#”和“height=#”屬性說明，“width=#”表示寬，“height=#”表示高，，#是以象素或者百分比為單位的數(shù)字。表格邊框的寬度是用“border=#”屬性說明，，#為寬度值，單位是象素，表格邊框的顏色是用“bordercolor="#"屬性說明，#是16進(jìn)制的6位數(shù)，格式為rrggbb，分別表示紅、 綠、蘭三色的分量。或者是16種已定義好的顏色名稱，參見文本顏色，單元格邊框的顏色屬性與表格的相同，但只適用于IE。下面是一個(gè)寬為300,高為80,邊框?qū)挒?,邊框顏色為“FF0000”的一行兩列表格，其中第一個(gè)單元格的寬為200,高為80，第二個(gè)單元格的邊框顏色為“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(左對(duì)齊), right(右對(duì)齊), center(居中)。分別見下例，注意這三個(gè)表格與邊界的位置關(guān)系：
第三個(gè)表格的代碼如下：
＜table width="80" border="1" align="right" height="30"＞
＜tr＞
＜td＞右對(duì)齊＜/td＞
＜/tr＞
＜/table＞
3、單元格里內(nèi)容的位置屬性
水平對(duì)齊方式，用align="#"屬性說明，#為left(左對(duì)齊), right(右對(duì)齊), center(居中)；垂直對(duì)齊方式，用valign="#"屬性說明，#為top(上對(duì)齊), bottom(下對(duì)齊), middle(居中)。分別見下例，注意單元格里的內(nèi)容與邊框的的位置關(guān)系：
水平對(duì)齊方式：
|
內(nèi)容左對(duì)齊
|
內(nèi)容居中
|
內(nèi)容右對(duì)齊
|
代碼如下：
＜table width="450" border="1"＞
＜tr＞
＜td width="150"＞
＜div align="left"＞內(nèi)容左對(duì)齊＜/div＞
＜/td＞
＜td width="150"＞
＜div align="center"＞內(nèi)容居中＜/div＞
＜/td＞
＜td＞
＜div align="right"＞內(nèi)容右對(duì)齊＜/div＞
＜/td＞
＜/tr＞
＜/table＞
垂直對(duì)齊方式
| 內(nèi)容上對(duì)齊 |
| 內(nèi)容居中 |
| 內(nèi)容下對(duì)齊 |
代碼如下：
＜table width="150" border="1"＞
＜tr＞
＜td height="40" width="146" valign="top"＞內(nèi)容上對(duì)齊＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="middle"＞內(nèi)容居中＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="bottom"＞內(nèi)容下對(duì)齊＜/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＞
說明：在上例中，整個(gè)表格的背景色是 bgcolor="#539996" ，第一行第二列的單元格背景圖片是 background="Back01.gif" ，第三行第二列的單元格背景色是 bgcolor="#FF0000" ,根據(jù)顯示結(jié)果可以看出：設(shè)置表格的背景色后再設(shè)置單元格的背景色或背景圖片，將優(yōu)先顯示單元格的屬性。
5、表格屬性cellspacing、cellpadding
5、表格屬性cellspacing、cellpadding
cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)。
我們來看下面的兩個(gè)表格：
上面第一個(gè)表格的單元格之間沒有空白距離，而第二個(gè)的單元格之間有很大的空白距離，我們來比較一下他們的源代碼：
第一個(gè)表格的代碼：
＜table width="200" cellspacing="0" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
第二個(gè)表格的代碼：
＜table width="200" cellspacing="8" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
比較代碼，上邊兩個(gè)表格中只有
cellspacing 的設(shè)置不同，一個(gè)為“0”，一個(gè)為“8”，顯示的結(jié)果就是第一個(gè)表格的每個(gè)單元格之間的距離為0(在本例中由于我們?yōu)榱孙@示的方便，將表格邊框設(shè)為“1”，所以單元格的真實(shí)距離是“2”，若將表格邊框設(shè)為“0”，則單元格 的距離就是0了，第二個(gè)單元格同理)，第二個(gè)表格的每個(gè)單元格之間的距離為8。
cellpadding屬性用來指定
單元格內(nèi)容與單元格邊界之間的空白距離的大小。此屬性的參數(shù)值也是數(shù)字，表示單元格內(nèi)容與上下邊界之間空白距離的高度所占像素點(diǎn)數(shù)以及單元格內(nèi)容與左右邊界之間空白距離的寬度所占的像素點(diǎn)數(shù)。我們先來看看這個(gè)例子:
我們來看下面兩個(gè)表格：
第一個(gè)表格單元格的內(nèi)容與單元格邊界之間沒有空白距離，而第二個(gè)表格單元格的內(nèi)容與單元格邊界之間有空白距離，我們來比較一下他們的源代碼：
第一個(gè)表格的代碼：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="０"＞
＜tr＞
＜td width="120"＞網(wǎng)頁陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
第二個(gè)表格的代碼：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15"＞
＜tr＞
＜td width="120"＞網(wǎng)頁陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
兩個(gè)表格只有紅色部分代碼不同。第一個(gè)表格中"網(wǎng)頁陶吧"這幾個(gè)字離它所在的單元格為0,那是因?yàn)樵O(shè)置了cellpadding="0"的原因.第一個(gè)表格中的"網(wǎng)頁陶吧"這幾個(gè)字離它所在的單元格比較遠(yuǎn)，那是因?yàn)?font color="#ff0000">cellpadding="15",也就是說"網(wǎng)頁陶吧"離它所在的單元格的邊界的距離為20像素。簡(jiǎn)單的說,cellpadding的值等于多少,那表格內(nèi)的單元格從自身邊界開始向內(nèi)保留多少空白,單元格里的元素永遠(yuǎn)都不會(huì)進(jìn)入那些空白里。
我們?cè)谝院蟮钠袝?huì)大量用到這兩個(gè)屬性，所以請(qǐng)大家不要弄混亂了, 為了形象的理解，請(qǐng)參考下圖：
