主頁 > 知識庫 > html制作細(xì)線表格的簡單實(shí)例

html制作細(xì)線表格的簡單實(shí)例

熱門標(biāo)簽:400電話是在哪里申請 商丘電話自動外呼系統(tǒng)怎么收費(fèi) 400電話辦理尚景 昌邑外呼系統(tǒng) 默納克系統(tǒng)外呼顯示inns 周口導(dǎo)航地圖標(biāo)注 東莞人工外呼系統(tǒng)多少錢 地圖標(biāo)注地點(diǎn)下載 朝陽自動外呼系統(tǒng)

關(guān)于這個細(xì)線表格的制作方法,百度一下可能就會有答案告訴你設(shè)置這幾個值:給table設(shè)置border="0" cellspacing="1" bgcolor="#990033"這幾個值,還要給單元格單獨(dú)設(shè)置背景色,例如:bgcolor="#fff"。但是關(guān)于為什么要設(shè)置這幾個值,估計就沒有詳細(xì)的講解了!

那么今天突然想到記錄一下關(guān)于這個細(xì)線表格的原理,也是因?yàn)檫@幾天在給學(xué)生上基礎(chǔ)課,學(xué)生關(guān)于這個細(xì)線表格原理不是很明白,所以想初學(xué)者的話,估計都會遇到類似的問題,所以這里就說一下為什么設(shè)置這幾個值。

首先我們先看看將表格的border的值設(shè)置為1的時候的效果,哪怕border="1",單元格之間的距離cellspacing="0",表格的粗細(xì)看起來還是比較粗糙:

我們再看看通過制作細(xì)線表格方法制作出來的是什么效果:

相比之下,后面的表格更為精致一些。

那么現(xiàn)在我先把制作細(xì)線表格的步驟歸納一下:

制作細(xì)線表格的步驟:

  1. 設(shè)置table的背景色(也就是視覺上表格邊框的顏色);
  2. 設(shè)置td(單元格)的背景色(視覺上整個表格的整體顏色)
  3. 設(shè)置table的邊框值為0(border=“0”), 間距的值為1 ( cellspacing=“1”,使table的背景色透過這個間距顯示出來,成為視覺上的邊框 )。

分析:table的背景色其實(shí)就是細(xì)線表格視覺上看起來的細(xì)線,因?yàn)槲覀儗order設(shè)置為0,并且單元格之間的間距cellspacing設(shè)置為1了,那么table的背景色就是透過這一像素的空隙透出來的顏色,給單元格設(shè)置背景色,就是為了和table的背景色區(qū)分開來。為了更好理解,我這里用圖片分析一下:

1、假設(shè)下面的表格border="1",顯示如下:

2、當(dāng)設(shè)置單元格間距cellspacing="0"時,兩個1像素的邊線挨在一起,就會顯得邊框很粗:

所以不能通過border="1"來設(shè)置細(xì)線效果

那我我們用細(xì)線方法來制作原理如下:

如果本文對您有幫助,記得推薦哦

原文地址:http://www.cnblogs.com/xcaocao/p/5643351.html

標(biāo)簽:福建 揭陽 健身房 沈陽 銅陵 那曲 阿拉善盟 湖南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html制作細(xì)線表格的簡單實(shí)例》,本文關(guān)鍵詞  html,制作,細(xì)線,表格,的,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html制作細(xì)線表格的簡單實(shí)例》相關(guān)的同類信息!
  • 本頁收集關(guān)于html制作細(xì)線表格的簡單實(shí)例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章