html表格從入門大精通詳解.doc

如果你是一名網(wǎng)頁(yè)設(shè)計(jì)人員，如果你的網(wǎng)頁(yè)里沒(méi)有一個(gè)表格，那可以說(shuō)算不上一個(gè)網(wǎng)頁(yè)(當(dāng)然全FLASH作品除外)，表格的重要性就可想而知。幫助我們控制網(wǎng)頁(yè)布局、控制內(nèi)容的顯示等等。使用表格有很多的技巧，你可否知道呢？ 使用表格排版網(wǎng)頁(yè) 使用表格排版網(wǎng)頁(yè)，可以使你的網(wǎng)頁(yè)更美觀，條理更清晰，更易于維護(hù)和更新。(將表格的寬設(shè)為100%，可以使網(wǎng)頁(yè)的兼容性更好) 要盡量細(xì)化表格 不要把整個(gè)網(wǎng)頁(yè)放在一個(gè)大的表格里，因?yàn)橐粋€(gè)大表格里的內(nèi)容要全部加載完才會(huì)顯示，如果整個(gè)網(wǎng)頁(yè)放在一個(gè)表格里，那么你的網(wǎng)頁(yè)就只會(huì)兩種情況： 1、全部不顯示 2、全部顯示出來(lái) 所以建議大家將整個(gè)頁(yè)面分成幾塊，例如通用的上(放置Logo、Banner、Menu等等)、中(放置頁(yè)面內(nèi)容)、下(放置版權(quán)信息等等)，將每一部分由單獨(dú)的表格來(lái)實(shí)現(xiàn)，這樣會(huì)好一些。 表格設(shè)計(jì)實(shí)例 創(chuàng)建一個(gè)表格，邊框大小設(shè)為0(border=0)，間距設(shè)為1(cellspacing=1)，背景色設(shè)為深色(bgcolor=#000000)，全部選定單無(wú)格，并將單無(wú)格的背景色設(shè)為淺色(如:bgcolor=#FFFFFF)，這樣可以得到一個(gè)細(xì)線邊框的表格，請(qǐng)看下面的例子： table width=50% border=0 cellspacing=1 bgcolor=#000000 /table 動(dòng)態(tài)改變表格單元格的顏色 在單元格標(biāo)記中加入以下代碼，會(huì)動(dòng)態(tài)改變單元格的顏色設(shè)置： onMouseOut=”this. bgColor=” onMouseOver=”this.bgColor=” 在行標(biāo)簽標(biāo)記中加入上面代碼，會(huì)動(dòng)態(tài)改變一行的顏色設(shè)置。 table width=50% border=0 cellspacing=1 bgcolor=#000000 A B C /table 小技巧：效果圖中的凸凹效果，完全是由bordercoloer的顏色來(lái)控制的，它的顏色淺一些，有會(huì)有凸出的效果，它的顏色深一點(diǎn)，就會(huì)有凹陷的效果。 隱藏表格的分隔線/ 在處理表格時(shí)有時(shí)會(huì)有這樣的需求，某幾列、或行的內(nèi)容屬于同一主題，為了排列整齊將它們放在不同的行上，但是不想讓表格的分隔線顯示出來(lái)，有什么辦法嗎，其實(shí)很簡(jiǎn)單。 隱藏水平分隔線 隱藏豎直分隔線 隱藏全部分隔線 表格內(nèi)容分行下載 表格內(nèi)有一些載入較慢的元素(如計(jì)數(shù)器、大圖片等等)時(shí)，往往會(huì)延遲整個(gè)表格的顯示。這是由IE的顯示特性決定的，只有當(dāng)表格內(nèi)所有元素全部載入后，整個(gè)表格才得以顯示?！吧嫌姓?，下有對(duì)策”，我們可以使用標(biāo)簽把表格內(nèi)容拆開(kāi)