資源描述：
《利用表格制作網(wǎng)頁的詳細(xì)步驟.doc》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、利用表格制作網(wǎng)頁的詳細(xì)步驟????????將一定的內(nèi)容按特定的行、列規(guī)則進(jìn)行排列就構(gòu)成了表格。無論在日常生活和工作中，還是在網(wǎng)頁設(shè)計中，表格通常都可以使信息更容易理解。HTML具有很強(qiáng)的表格功能，使用戶可以方便地創(chuàng)建出各種規(guī)格的表格，并能對表格進(jìn)行特定的修飾，從而使網(wǎng)頁更加生動活潑。HTML表格模型使用戶可以將各種數(shù)據(jù)(包括文本、預(yù)格式化文本、圖像、鏈接、表單、表單域以及其他表格等)排成行和列，從而獲得特定的表格效果。 表格在網(wǎng)頁設(shè)計中的地位非常重要，可以說如果您表格用不好的話，就不可能設(shè)計出出色的網(wǎng)頁。大多
2、數(shù)初學(xué)者一開始就接觸表格，對表格都有一定的了解，但是要實現(xiàn)真正細(xì)致甚至強(qiáng)大的功能，仔細(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＞
3、和＜th＞組成的表格?！ ”砀裰匾幕緲?biāo)記不多，但每個標(biāo)記都有很多的屬性，考慮到一下子把這些屬性都列出來，可能讓初學(xué)者感到無從下手，所以我們還是從表格的外觀(即瀏覽器中顯示的表格的樣式)來了解最基本的屬性?！ ≡谥v解之前，我們先來看看表格的基本構(gòu)造。下圖是一個3行3列的表格。? 這里面有兩個概念要弄明白：表格與單元格。他們的關(guān)系是整體與局部的關(guān)系，如同砌墻的磚和砌好的墻一樣。在上面3行3列的表格中一共有9個單元格。由于我們后面將提到的表格屬性和單元格屬性有很多是相同的，所以一定要分清楚。前面已經(jīng)說過表格的最
4、基本標(biāo)記為＜table＞、＜tr＞、＜td＞，可以先樹立這樣一個概念：描述整個表格的屬性標(biāo)記放在＜table＞里，描述單元格的屬性標(biāo)記放在＜tr＞、＜td＞里。有這樣一個概念后，我們學(xué)習(xí)起來就可能簡單些?！ ?、表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色 表格以及單元格的大小是用“width=#”和“height=#”屬性說明，“width=#”表示寬，“height=#”表示高，，#是以象素或者百分比為單位的數(shù)字。表格邊框的寬度是用“border=#”屬性說明，，#為寬度值，單位是象素，表格
5、邊框的顏色是用“bordercolor="#"屬性說明，#是16進(jìn)制的6位數(shù)，格式為rrggbb，分別表示紅、綠、蘭三色的分量?；蛘呤?6種已定義好的顏色名稱，參見文本顏色，單元格邊框的顏色屬性與表格的相同，但只適用于IE。下面是一個寬為300,高為80,邊框?qū)挒?,邊框顏色為“FF0000”的一行兩列表格，其中第一個單元格的寬為200,高為80，第二個單元格的邊框顏色為“0000FF”。?? 代碼如下：＜tableborder="4"width="300"height="80"bordercolor="#F
6、F0000"＞＜tr＞＜tdwidth="200"height="80"＞?＜/td＞＜tdbordercolor="#0000FF"＞?＜/td＞＜/tr＞＜/table＞ 2、表格的水平擺放位置 表格的水平擺放位置是用align="#"屬性說明的，#為left(左對齊),right(右對齊),center(居中)。分別見下例，注意這三個表格與邊界的位置關(guān)系：左對齊center右對齊 第三個表格的代碼如下：＜tablewidth="80"border="1"align="right"height="30
7、"＞＜tr＞＜td＞右對齊＜/td＞＜/tr＞＜/table＞ 3、單元格里內(nèi)容的位置屬性 水平對齊方式，用align="#"屬性說明，#為left(左對齊),right(右對齊),center(居中)；垂直對齊方式，用valign="#"屬性說明，#為top(上對齊),bottom(下對齊),middle(居中)。分別見下例，注意單元格里的內(nèi)容與邊框的的位置關(guān)系： 水平對齊方式：內(nèi)容左對齊內(nèi)容居中內(nèi)容右對齊 代碼如下：＜tablewidth="450"border="1"＞＜tr＞＜tdwidth="
8、150"＞＜divalign="left"＞內(nèi)容左對齊＜/div＞＜/td＞＜tdwidth="150"＞＜divalign="center"＞內(nèi)容居中＜/div＞＜/td＞＜td＞＜divalign="right"＞內(nèi)容右對齊＜/div＞＜/td＞＜/tr＞＜/table＞ 垂直對齊方式內(nèi)容上對齊內(nèi)容居中內(nèi)容下對齊 代碼如下：＜tablewidth="150"border="1"
