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

1、無(wú)利用表格制作網(wǎng)頁(yè)的詳細(xì)步驟利用表格制作網(wǎng)頁(yè)的詳細(xì)步驟將一定的內(nèi)容按特定的行、列規(guī)則進(jìn)行排列就構(gòu)成了表格。無(wú)論在日常生活和工作中， 還是在網(wǎng)頁(yè)設(shè)計(jì)中， 表格通常都可以使信息更容易理解。HTML 具有很強(qiáng)的表格功能，使用戶可以方便地創(chuàng)建出各種規(guī)格的表格，并能對(duì)表格進(jìn)行特定的修飾，從而使網(wǎng)頁(yè)更加生動(dòng)活潑。HTML 表格模型使用戶可以將各種數(shù)據(jù)(包括文本、預(yù)格式化文本、圖像、鏈接、表單、表單域以及其他表格等)排成行和列，從而獲得特定的表格效果。表格在網(wǎng)頁(yè)設(shè)計(jì)中的地位非常重要，可以說(shuō)如果您表格用不好的話，就不可能設(shè)計(jì)出出色的網(wǎng)頁(yè)。 大多數(shù)初學(xué)者一開(kāi)始就接觸表格， 對(duì)表格都有一定的了解，但是要實(shí)現(xiàn)真正細(xì)

2、致甚至強(qiáng)大的功能，仔細(xì)理解 table 的代碼結(jié)構(gòu)至關(guān)重要！我們將在這里詳細(xì)介紹表格各種常用的標(biāo)記、技巧以及表格使用中的問(wèn)題，了解和掌握了這些內(nèi)容，你將發(fā)現(xiàn)，table 原來(lái)是這樣的親切易用!一、創(chuàng)建基本的表格一個(gè)表由table開(kāi)始， /table結(jié)束，表的內(nèi)容由 tr,th和td定義。tr說(shuō)明表的一個(gè)行，表有多少行就有多少個(gè)tr；th說(shuō)明表的列數(shù)和相應(yīng)欄目的名 稱(chēng)，有多少個(gè)欄就有多少個(gè)th；td則填充由tr和 th組成的表格。表格重要的基本標(biāo)記不多，但每個(gè)標(biāo)記都有很多的屬性，考慮到一下子把這些屬性都列出來(lái)，可能讓初學(xué)者感到無(wú)從下手，所以我們還是從表格的外觀(即瀏覽器中顯示的表格的樣式)來(lái)了解

3、最基本的屬性。在講解之前，我們先來(lái)看看表格的基本構(gòu)造。 下圖是一個(gè) 3 行 3 列的表格。這里面有兩個(gè)概念要弄明白：表格與單元格。他們的關(guān)系是整體與局部的關(guān)系，如同砌墻的磚和砌好的墻一樣。在上面 3 行 3 列的表格中一共有 9 個(gè)單元格。 由于我們后面將提到的表格屬性和單元格屬性有很多是相同的，所以一定要分清楚。前面已經(jīng)說(shuō)過(guò)表格的最基本標(biāo)記為table、tr、td，可以先樹(shù)立這樣一個(gè)概念：描述整個(gè)表格的屬性標(biāo)記放在table里，描述單元格的屬性標(biāo)記放在tr、td里。 有這樣一個(gè)概念后，我們學(xué)習(xí)起來(lái)就可能簡(jiǎn)單些。1、表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色無(wú)表格以及單元格的大

4、小是用“width=#”和“height=#”屬性說(shuō)明，“width=#”表示寬，“height=#”表示高，#是以象素或者百分比為單位的數(shù)字。表格邊框的寬度是用“border=#”屬性說(shuō)明，#為寬度值，單位是象素，表格邊框的顏色是用“bordercolor=#屬性說(shuō)明，#是 16 進(jìn)制的 6 位數(shù)，格式為 rrggbb，分別表示紅、 綠、蘭三色的分量。或者是 16 種已定義好的顏色名稱(chēng)，參見(jiàn)文本顏色，單元格邊框的顏色屬性與表格的相同，但只適用于 IE。下面是一個(gè)寬為300,高為 80,邊框?qū)挒?4,邊框顏色為“FF0000”的一行兩列表格，其中第一個(gè)單元格的寬為 200,高為 80， 第二個(gè)

5、單元格的邊框顏色為“0000FF”。代碼如下：table border=4 width=300 height=80 bordercolor=#FF0000trtd width=200 height=80/tdtd bordercolor=#0000FF/td/tr/table2、表格的水平擺放位置表格的水平擺放位置是用 align=# 屬性說(shuō)明的，#為 left(左對(duì)齊),right(右對(duì)齊), center(居中)。分別見(jiàn)下例，注意這三個(gè)表格與邊界的位置關(guān)系：左對(duì)齊center右對(duì)齊第三個(gè)表格的代碼如下：table width=80 border=1 align=right height=3

6、0trtd右對(duì)齊/td無(wú)/tr/table3、單元格里內(nèi)容的位置屬性水平對(duì)齊方式，用 align=#屬性說(shuō)明，#為 left(左對(duì)齊), right(右對(duì)齊), center(居中)；垂直對(duì)齊方式，用 valign=#屬性說(shuō)明，#為 top(上對(duì)齊), bottom(下對(duì)齊), middle(居中)。分別見(jiàn)下例，注意單元格里的內(nèi)容與邊框的的位置關(guān)系：水平對(duì)齊方式：內(nèi)容左對(duì)齊內(nèi)容居中內(nèi)容右對(duì)齊代碼如下：table width=450 border=1trtd width=150div align=left內(nèi)容左對(duì)齊/div/tdtd width=150div align=center內(nèi)容居中/d

7、iv/tdtddiv align=right內(nèi)容右對(duì)齊/div/td/tr/table垂直對(duì)齊方式無(wú)內(nèi)容上對(duì)齊內(nèi)容居中內(nèi)容下對(duì)齊代碼如下：table width=150 border=1trtd height=40 width=146 valign=top內(nèi)容上對(duì)齊/td/trtrtd height=40 width=146 valign=middle內(nèi)容居中/td/trtrtd height=40 width=146 valign=bottom內(nèi)容下對(duì)齊/td/tr/table4、表格的背景色、背景圖片，單元格的背景色、背景圖片背景色屬性：bgcolor=# ，背景圖片屬性：backgrou

8、nd=#。見(jiàn)下例：代碼如下：table width=450 border=1 bgcolor=#539996bordercolor=#FFFFFF height=90無(wú)trtd/tdtd background=Back01.gif/td/trtrtd/tdtd/td/trtrtd bgcolor=#FF0000/tdtd/td/tr/table說(shuō)明：在上例中，整個(gè)表格的背景色是 bgcolor=#539996 ，第一行第二列的單元格背景圖片是 background=Back01.gif ，第三行第二列的單元格背景色是 bgcolor=#FF0000 ,根據(jù)顯示結(jié)果可以看出：設(shè)置表格的背景色后再

9、設(shè)置單元格的背景色或背景圖片，將優(yōu)先顯示單元格的屬性。5、表格屬性 cellspacing、cellpadding5、表格屬性 cellspacing、cellpaddingcellspacing 屬性用來(lái)指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)。我們來(lái)看下面的兩個(gè)表格：無(wú)上面第一個(gè)表格的單元格之間沒(méi)有空白距離， 而第二個(gè)的單元格之間有很大的空白距離，我們來(lái)比較一下他們的源代碼：第一個(gè)表格的代碼：table width=200 cellspacing=0 border=1bordercolor=#000000trtd/tdtd/tdtd/td/tr/tab

10、le第二個(gè)表格的代碼：table width=200 cellspacing=8 border=1bordercolor=#000000trtd/tdtd/tdtd/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 屬性用來(lái)指定單元格內(nèi)容與單元格邊界之間的空白距

11、離的大小。此屬性的參數(shù)值也是數(shù)字，表示單元格內(nèi)容與上下邊界之間空白距離的無(wú)高度所占像素點(diǎn)數(shù)以及單元格內(nèi)容與左右邊界之間空白距離的寬度所占的像素點(diǎn)數(shù)。我們先來(lái)看看這個(gè)例子:我們來(lái)看下面兩個(gè)表格：網(wǎng)頁(yè)教學(xué)網(wǎng)網(wǎng)頁(yè)教學(xué)網(wǎng)第一個(gè)表格單元格的內(nèi)容與單元格邊界之間沒(méi)有空白距離， 而第二個(gè)表格單元格的內(nèi)容與單元格邊界之間有空白距離，我們來(lái)比較一下他們的源代碼：第一個(gè)表格的代碼：table width=240 cellspacing=0 border=1bordercolor=#000000 cellpadding=trtd width=120網(wǎng)頁(yè)陶吧/tdtd/td/tr/table第二個(gè)表格的代碼：table width=240 cellspacing=0 border=1bordercolor=#000000 cellpadding=15trtd width=120網(wǎng)頁(yè)陶吧/tdtd/td/tr/table兩個(gè)表格只有紅色部分代碼不同。 第一個(gè)表格中網(wǎng)頁(yè)陶吧這幾個(gè)字離它所在的單元格為 0,那是因?yàn)樵O(shè)置了 cellpadding=0的原因.第一個(gè)表格中的