Posted on 2006-03-11 14:55
橘子 閱讀(347)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
WEB開(kāi)發(fā)
網(wǎng)頁(yè)制作中表格扮演了很重要的角色。你是否知道，表格還有很多的秘密呢？通過(guò)與Javascript、CSS等的結(jié)合，表格還有很多巧妙的用處。
1、用表格做流動(dòng)分割線(xiàn)
我們知道，在網(wǎng)頁(yè)中可以用
標(biāo)識(shí)來(lái)做分割線(xiàn)，也可以把表格設(shè)置為1個(gè)象素高或?qū)挸洚?dāng)分割線(xiàn)。現(xiàn)在，我們將表格與Javascript結(jié)合，可以做出更生動(dòng)的分割線(xiàn)——流動(dòng)的分割線(xiàn)。加入以下代碼，你就可以看到一條分割線(xiàn)，顏色在不斷的流動(dòng)。
在上面的代碼中，我們可以通過(guò)修改
標(biāo)識(shí)中的height和width設(shè)置分割線(xiàn)的高度和長(zhǎng)度。
2、帶滾動(dòng)條的表格
看看圖一的效果，可千萬(wàn)不要以為是IFRAME，這可是地地道道的表格！其實(shí)，這是表格和CSS結(jié)合的效果。當(dāng)網(wǎng)頁(yè)上有大段文字要顯示，而又沒(méi)有足夠的空間時(shí)，這就派上用場(chǎng)了。雖然用文本框也可以實(shí)現(xiàn)類(lèi)似效果，但卻遠(yuǎn)沒(méi)有用表格靈活。代碼很簡(jiǎn)單，只要在單元格
標(biāo)識(shí)后加上如下代碼就可以了：
3、帶標(biāo)題的表格
看看圖二的效果。通常，我們要給表格加標(biāo)題，不是用單元格的方法就是用圖片，很麻煩。其實(shí)，我們可以只用很一些很簡(jiǎn)單的HTML標(biāo)識(shí)，就可以輕松實(shí)現(xiàn)給表格加標(biāo)題了。這個(gè)標(biāo)識(shí)似乎已被人遺忘，很少看到使用，不過(guò)它實(shí)現(xiàn)的效果還是很不錯(cuò)的。下面就來(lái)看看如何實(shí)現(xiàn)：
|
|
|