中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

為ID指定圖標(biāo)

記得本章開始的時(shí)候我們?yōu)楸砀窭锏拿恳粋�(gè)<th>加上唯一的ID嗎?那時(shí)我們把這些id與數(shù)據(jù)列表中的headers屬性匹配起來,幫助非可視化瀏覽器的使用者了解表格的內(nèi)容,現(xiàn)在我們能在另一個(gè)地方發(fā)揮這個(gè)id的功能了,那就是為每個(gè)<th>指定不同的圖標(biāo).

圖標(biāo)路徑會完全記錄在css文件中,讓你能夠在網(wǎng)站重構(gòu),更新時(shí)輕易的替換,完全不必修改標(biāo)簽部分.

圖標(biāo)

我用photoshop做了三個(gè)獨(dú)特的圖標(biāo),分別用在示例中每個(gè)表頭上:Year, Opponent與Season Record(W-L).圖3-10就是這三個(gè)圖標(biāo):

圖3-10hotoshop制作的三個(gè)表頭圖標(biāo)

CSS

加上css并不困難,因?yàn)槲覀優(yōu)槊總�(gè)<th>都制定了獨(dú)特的id,因此我們能直接用background屬性來指定正確的圖標(biāo).

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  }
#year {
  padding-left: 26px;
  background: #ccc url(icon_year.gif) no-repeat 10px 50%;
  }
#opponent {
  padding-left: 26px;
  background: #ccc url(icon_opp.gif) no-repeat 10px 50%;
  }
#record {
  padding-left: 26px;
  background: #ccc url(icon_rec.gif) no-repeat 10px 50%;
  }

你應(yīng)該注意到了,我們改用簡寫方式定義了背景樣式,我們從th的定義中取出background:#ccc規(guī)則,并把它放到每個(gè)表頭的圖標(biāo)名稱旁邊,這會使得我們的圖標(biāo)"坐"在我們指定的灰色背景上面,我們也在每個(gè)表頭內(nèi)容的左邊留夠圖標(biāo)的空間,不讓文字覆蓋上去,圖3-11就是我們想要的效果:

圖3-11:為每個(gè)<th>制定獨(dú)特圖標(biāo)的效果

使用簡寫語法有明顯的優(yōu)點(diǎn),然而,如果我們只以background屬性定義圖片,不定義背景色的話,就應(yīng)該先取消掉先前在<th>中以background定義的背景色.

組合規(guī)則,簡化內(nèi)容

能夠達(dá)到相同功能的另一種寫法,是把每個(gè)表頭里反復(fù)出現(xiàn)的規(guī)則(在這個(gè)例子中是背景圖片,內(nèi)補(bǔ)丁和位置)拿出來寫在<th>定義一次就好了(因?yàn)樗鼈兊脑O(shè)定在每個(gè)<th>中的確都一樣),然后只在#year,#opponent,#record定義內(nèi)保留各自不同的設(shè)定值(也就是圖片路徑)

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  padding-left: 26px;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  }
#year {
  background-image: url(icon_year.gif);
  }
#opponent {
  background-image: url(icon_opp.gif);
  }
#record {
  background: url(icon_rec.gif);
  }

這樣稍微簡潔一些了吧?借著整合相同規(guī)則,我們能夠省下每次重復(fù)定義修改的時(shí)間和精力,以這個(gè)例子來說,看起來只差六個(gè),半打而已,但是對大一些的樣式表來說,節(jié)省的量就很可觀了.

總結(jié)

在本章,我們不僅發(fā)現(xiàn)了表格并不邪惡,同時(shí)還深入了解表格之后,我們發(fā)現(xiàn),他們很適合用來標(biāo)記例表數(shù)據(jù),而且仍然易于使用

我們更發(fā)現(xiàn),只要加上一些樣式,就能控制列表數(shù)據(jù)的顯示方式,讓他們變得十分具有吸引力,別再為使用表格而感到恐懼了.

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2823233-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2008/5710.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 標(biāo)記語言——邪惡的表格? [7] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。