HTML表格使用從入門到精通

來源:互聯網
上載者:User

  如果你是一名網頁設計人員,如果你的網頁裡沒有一個表格,那可以說算不上一個網頁(當然全FLASH作品除外),表格的重要性就可想而知。協助我們控制網頁布局、控制內容的顯示等等。使用表格有很多的技巧,你可否知道呢?  

  使用表格排版網頁

  使用表格排版網頁,可以使你的網頁更美觀,條理更清晰,更易於維護和更新。(將表格的寬設為100%,可以使網頁的相容性更好)  

  要盡量細化表格

  不要把整個網頁放在一個大的表格裡,因為一個大表格裡的內容要全部載入完才會顯示,如果整個網頁放在一個表格裡,那麼你的網頁就只會兩種情況:  

  1、全部不顯示

  2、全部顯示出來  

  所以建議大家將整個頁面分成幾塊,例如通用的上(放置Logo、Banner、Menu等等)、中(放置頁面內容)、下(放置著作權資訊等等),將每一部分由單獨的表格來實現,這樣會好一些。  

  表格設計執行個體

  建立一個表格,邊框大小設為0(border=0),間距設為1(cellspacing="1"),背景色設為深色(bgcolor="#000000"),全部選定單無格,並將單無格的背景色設為淺色(如:bgcolor="#FFFFFF"),這樣可以得到一個細線邊框的表格,請看下面的例子:  

  〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">

  <tr bgcolor="#FFFFFF">

  <td> </td>

  <td> </td>

  </tr>

  <tr bgcolor="#FFFFFF">

  <td> </td>

  <td> </td>

  </tr>

  </table〉  

  動態改變表格儲存格的顏色

  在儲存格<td>標記中加入以下代碼,會動態改變儲存格的顏色設定:

  onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”  

  在列標籤<tr>標記中加入上面代碼,會動態改變一行的顏色設定。  

  〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">

  <tr bgcolor="#FFFFFF" >

  <td> </td>

  <td> </td>

  </tr>

  <tr bgcolor="#FFFFFF">

  <td > </td>

  <td > </td>

  </tr>

  </table〉

  用表格替代水平線、豎直線

  用表格代替水平線,插入一個表格,將高度設為1(按需要設定),當然也可以將寬度設為1,製作豎直線。  

  〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

  <td height="1" bgcolor="#000000"></td>

  </tr>

  </table>

  <br>

  <table height="100" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

  <td width="1" bgcolor="#000000"></td>

  </tr>

  </table〉
  

  注意:在Dreamweaver裡製作時,先將高設為1後,切換到代碼視窗,將表格裡的空格符去掉( ),如果不將空格去除的話,將看不到想要的效果了。  

  製作帶有立體感的表格

  在頁面中適當的加入帶有立體感的表格元素,會給你的頁面添光加彩。  

  〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">

  <tr>

  <td>A</td>

  <td> </td>

  </tr>

  <tr>

  <td> </td>

  <td> </td>

  </tr>

  </table>

  <br>

  <table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC">

  <tr>

  <td>B</td>

  <td> </td>

  </tr>

  <tr>

  <td> </td>

  <td> </td>

  </tr>

  </table>

  <br>

  <table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">

  <tr>

  <td>C</td>

  <td> </td>

  </tr>

  <tr>

  <td> </td>

  <td> </td>

  </tr>

  </table〉  

  小技巧:效果圖中的凸凹效果,完全是由bordercoloer的顏色來控制的,它的顏色淺一些,有會有凸出的效果,它的顏色深一點,就會有凹陷的效果。

  隱藏表格的分隔線

  在處理表格時有時會有這樣的需求,某幾列、或行的內容屬於同一主題,為了排列整齊將它們放在不同的行上,但是不想讓表格的分隔線顯示出來,有什麼辦法嗎,其實很簡單。

  隱藏水平分隔線

  〈table border rules=cols cellspacing=0 align=left>  

  隱藏豎直分隔線

  〈table border rules=rows cellspacing=0 align=left>  

  隱藏全部分隔線

  〈table border rules=none cellspacing=0 align=left>  

  表格內容分行下載

  表格內有一些載入較慢的元素(如計數器、大圖片等等)時,往往會延遲整個表格的顯示。這是由IE的顯示特性決定的,只有當表格內所有元素全部載入後,整個表格才得以顯示。“上有政策,下有對策”,我們可以使用標籤把表格內容拆開,放在幾個豎向相連的大表格中,把關鍵內容放在上面的表格中,讓它們先顯示,這樣使用者就不會因為失去耐心而關閉視窗了。

  站長註:在使用上面代碼學習時注意把“>”和“<”變為“>”和“<”。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。