利用表格制作網(wǎng)頁的詳細(xì)步驟.doc

利用表格制作網(wǎng)頁的詳細(xì)步驟將一定的內(nèi)容按特定的行、列規(guī)則進行排列就構(gòu)成了表格。無論在日常生活和工作中，還是在網(wǎng)頁設(shè)計中，表格通常都可以使信息更容易理解。HTML 具有很強的表格功能，使用戶可以方便地創(chuàng)建出各種規(guī)格的表格，并能對表格進行特定的修飾，從而使網(wǎng)頁更加生動活潑。HTML 表格模型使用戶可以將各種數(shù)據(jù)(包括文本、預(yù)格式化文本、圖像、鏈接、表單、表單域以及其他表格等)排成行和列，從而獲得特定的表格效果。表格在網(wǎng)頁設(shè)計中的地位非常重要，可以說如果您表格用不好的話，就不可能設(shè)計出出色的網(wǎng)頁。大多數(shù)初學(xué)者一開始就接觸表格，對表格都有一定的了解，但是要實現(xiàn)真正細(xì)致甚至強大的功能，仔細(xì)理解table的代碼結(jié)構(gòu)至關(guān)重要！我們將在這里詳細(xì)介紹表格各種常用的標(biāo)記、技巧以及表格使用中的問題，了解和掌握了這些內(nèi)容，你將發(fā)現(xiàn)，table原來是這樣的親切易用!一、創(chuàng)建基本的表格一個表由table開始， /table結(jié)束，表的內(nèi)容由 tr,th和td定義。tr說明表的一個行，表有多少行就有多少個tr；th說明表的列數(shù)和相應(yīng)欄目的名 稱，有多少個欄就有多少個th；td則填充由tr和 th組成的表格。表格重要的基本標(biāo)記不多，但每個標(biāo)記都有很多的屬性，考慮到一下子把這些屬性都列出來，可能讓初學(xué)者感到無從下手，所以我們還是從表格的外觀(即瀏覽器中顯示的表格的樣式)來了解最基本的屬性。在講解之前，我們先來看看表格的基本構(gòu)造。 下圖是一個3行3列的表格。這里面有兩個概念要弄明白：表格與單元格。他們的關(guān)系是整體與局部的關(guān)系，如同砌墻的磚和砌好的墻一樣。在上面3行3列的表格中一共有9個單元格。由于我們后面將提到的表格屬性和單元格屬性有很多是相同的，所以一定要分清楚。前面已經(jīng)說過表格的最基本標(biāo)記為table、tr、td，可以先樹立這樣一個概念：描述整個表格的屬性標(biāo)記放在table里，描述單元格的屬性標(biāo)記放在tr、td里。 有這樣一個概念后，我們學(xué)習(xí)起來就可能簡單些。1、表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色表格以及單元格的大小是用“width=#”和“height=#”屬性說明，“width=#”表示寬，“height=#”表示高，#是以象素或者百分比為單位的數(shù)字。表格邊框的寬度是用“border=#”屬性說明，#為寬度值，單位是象素，表格邊框的顏色是用“bordercolor=#屬性說明，#是16進制的6位數(shù)，格式為rrggbb，分別表示紅、 綠、蘭三色的分量?；蛘呤?6種已定義好的顏色名稱，參見文本顏色，單元格邊框的顏色屬性與表格的相同，但只適用于IE。下面是一個寬為300,高為80,邊框?qū)挒?,邊框顏色為“FF0000”的一行兩列表格，其中第一個單元格的寬為200,高為80，第二個單元格的邊框顏色為“0000FF”。 代碼如下：table border=4 width=300 height=80 bordercolor=#FF0000tr td width=200 height=80/tdtd bordercolor=#0000FF/td/tr/table 2、表格的水平擺放位置表格的水平擺放位置是用align=# 屬性說明的，#為left(左對齊), right(右對齊), center(居中)。分別見下例，注意這三個表格與邊界的位置關(guān)系：左對齊center右對齊第三個表格的代碼如下： table width=80 border=1 align=right height=30tr td右對齊/td/tr/table3、單元格里內(nèi)容的位置屬性水平對齊方式，用align=#屬性說明，#為left(左對齊), right(右對齊), center(居中)；垂直對齊方式，用valign=#屬性說明，#為top(上對齊), bottom(下對齊), middle(居中)。分別見下例，注意單元格里的內(nèi)容與邊框的的位置關(guān)系：水平對齊方式： 內(nèi)容左對齊內(nèi)容居中內(nèi)容右對齊代碼如下：table width=450 border=1trtd width=150div align=left內(nèi)容左對齊/div/tdtd width=150div align=center內(nèi)容居中/div/tdtddiv align=right內(nèi)容右對齊/div/td/tr/table垂直對齊方式 內(nèi)容上對齊內(nèi)容居中內(nèi)容下對齊代碼如下：table width=150 border=1trtd height=40 width=146 valign=top內(nèi)容上對齊/td/trtrtd height=40 width=146 valign=middle內(nèi)容居中/td/trtrtd height=40 width=146 valign=bottom內(nèi)容下對齊/td/tr/table4、表格的背景色、背景圖片，單元格的背景色、背景圖片背景色屬性：bgcolor=# ，背景圖片屬性：background=#。見下例： 代碼如下： table width=450 border=1 bgcolor=#539996 bordercolor=#FFFFFF height=90trtd/tdtd background=Back01.gif/td/trtrtd/tdtd/td/trtrtd bgcolor=#FF0000/tdtd/td/tr/table說明：在上例中，整個表格的背景色是 bgcolor=#539996 ，第一行第二列的單元格背景圖片是 background=Back01.gif ，第三行第二列的單元格背景色是 bgcolor=#FF0000 ,根據(jù)顯示結(jié)果可以看出：設(shè)置表格的背景色后再設(shè)置單元格的背景色或背景圖片，將優(yōu)先顯示單元格的屬性。5、表格屬性cellspacing、cellpadding5、表格屬性cellspacing、cellpaddingcellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點數(shù)。 我們來看下面的兩個表格： 上面第一個表格的單元格之間沒有空白距離，而第二個的單元格之間有很大的空白距離，我們來比較一下他們的源代碼：第一個表格的代碼：table width=200 cellspacing=0 border=1 bordercolor=#000000tr td/tdtd/tdtd/td/tr/table第二個表格的代碼：table width=200 cellspacing=8 border=1 bordercolor=#000000trtd/tdtd/tdtd/td/tr/table比較代碼，上邊兩個表格中只有 cellspacing 的設(shè)置不同，一個為“0”，一個為“8”，顯示的結(jié)果就是第一個表格的每個單元格之間的距離為0(在本例中由于我們?yōu)榱孙@示的方便，將表格邊框設(shè)為“1”，所以單元格的真實距離是“2”，若將表格邊框設(shè)為“0”，則單元格的距離就是0了，第二個單元格同理)，第二個表格的每個單元格之間的距離為8。cellpadding屬性用來指定單元格內(nèi)容與單元格邊界之間的空白距離的大小。此屬性的參數(shù)值也是數(shù)字，表示單元格內(nèi)容與上下邊界之間空白距離的高度所占像素點數(shù)以及單元格內(nèi)容與左右邊界之間空白距離的寬度所占的像素點數(shù)。我們先來看看這個例子:我們來看下面兩個表格：網(wǎng)頁教學(xué)網(wǎng)網(wǎng)頁教學(xué)網(wǎng) 第一個表格單元格的內(nèi)容與單元格邊界之間沒有空白距離，而第二個表格單元格的內(nèi)容與單元格邊界之間有空白距離，我們來比較一下他們的源代碼：第一個表格的代碼：table width=240 cellspacing=0 border=1 bordercolor=#000000 cellpadding=tr td width=120網(wǎng)頁陶吧/tdtd/td/tr/table第二個表格的代碼：table width=240 cellspacing=0 border=1 bordercolor=#000000 cellpadding=15tr td width=120網(wǎng)頁陶吧/tdtd/td/tr/table兩個表格只有紅色部分代碼不同。第一個表格中網(wǎng)頁陶吧這幾個字離它所在的單元格為0,那是因為設(shè)置了cellpadding=0的原因.第一個表格