[藍森林-自由軟件]

　您目前的位置： > > > 應用編程

藍森林 http://www.lslnet.com 2006年8月25日 8:28

表格雜談

[color=Red][size=4]以前其實已經有很多關於表格的帖子了,其中有很多非常漂亮美觀的表格,但主要是使用了CSS來實現.我在這裡就不再談論CSS實現的方法了,我要談談如何用簡單的HTML來構造漂亮美觀的表格.單純使用HTML的表格,具有速度快的優勢哦[/color][/size]
[color=Red][size=4][b]1.白色邊框的表格,以一個象素的圖片作為邊框[/b][/color][/size]
[html]<table width="401" border="0" cellspacing="0" cellpadding="1">
 <tr valign="top">
 <td bgcolor="#980000" height="100" width="200">
 
 藍色理想首頁
 專業的網站綜合類服務
 </td>
 <td height="100" width="1"><img src="http://www.entheosweb.com/images/spacer.gif" width="1" height="1"></td>
 <td bgcolor="#CC9900" height="60" width="200">
 藍色理想產品
 最豐富全面的精神糧食 
 </td>
 </tr>
 <tr valign="top">
 <td height="1" width="200"><img src="http://www.entheosweb.com/images/spacer.gif" width="1" height="1"></td>
 <td height="1" width="1"><img src="http://www.entheosweb.com/images/spacer.gif" width="1" height="1"></td>
 <td height="1" width="200"><img src="http://www.entheosweb.com/images/spacer.gif" width="1" height="1"></td>
 </tr>
 <tr valign="top">
 <td bgcolor="#D09C00" width="200" height="60">
 
 藍色理想資源
 這裡絕對有你想要的 
 
 </td>
 <td width="1" height="100"><img src="http://www.entheosweb.com/images/spacer.gif" width="1" height="1"></td>
 <td bgcolor="#980000" width="200" height="100">
 藍色理想論壇
 人氣極旺的交流場所 
 <img src="images/shim.gif" width="1" height="1">
 
 </td>
 </tr>
</table>[/html]
[color=Red][size=4][b]2.只有外邊框的表格[/b][/color][/size]
[html]<table width="250" border="0" cellspacing="0" cellpadding="1" bgcolor="#000066" align="left">
 <tr>
 <td>
 <table width="100%" border="0" cellspacing="0" cellpadding="3" bgcolor="#FFE0E0">
 <tr>
 <td bgcolor="#000066" valign="top" width="50%">
 藍色理想
 可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛
 </td>
 <td bgcolor="#FFFFFF" width="50%" valign="top">
 藍色資源
 可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可
 </td>
 </tr>
 <tr>
 <td bgcolor="#FFFFFF" valign="top" width="50%">
 理想論壇
 以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可以經常下載可 
 <img src="images/shim.gif" width="1" height="1">
 
 </td>
 <td bgcolor="#000068" width="50%" valign="top">
 聯繫我們
 可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛逛可以經常來逛
 </td>
 </tr>
 </table>
 </td>
 </tr>
</table>[/html]
[color=Red][size=4][b]3.位於同一行的多個表格[/b][/color][/size]
[html]<table width="368" border="0" cellspacing="0" cellpadding="2" align="left" height="100">
 <tr valign="middle">
 <td bgcolor="#000066" width="120" height="20">
 <div align="center">藍色理想 </div>
 </td>
 <td width="4" height="20"></td>
 <td bgcolor="#990000" width="120" height="20">
 <div align="center">紅色理想</div>
 </td>
 <td width="4" height="20"></td>
 <td bgcolor="#C89800" width="120" height="20">
 <div align="center">黃色理想 </div>
 </td>
 </tr>
 <tr valign="top">
 <td bgcolor="#000066" width="120">
 <table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
 <tr bgcolor="#FFFFFF" valign="top">
 <td>
 藍色的理想
 </td>
 </tr>
 </table>
 </td>
 <td width="4"></td>
 <td bgcolor="#990000" width="120">
 <table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
 <tr bgcolor="#FFFFFF" valign="top">
 <td>
 紅色的理想
 </td>
 </tr>
 </table>
 </td>
 <td width="4"></td>
 <td bgcolor="#C89800" width="120">
 <table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
 <tr bgcolor="#FFFFFF" valign="top">
 <td>
 黃色的理想
 </td>
 </tr>
 <tr bgcolor="#C89800">
 <td bgcolor="#C89800" height="20"> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>[/html]
[color=Red][size=4][b]4.使用邊框屬性[/b][/color][/size]
[html]<table width="300" border="1" cellspacing="0" cellpadding="3" bordercolor="#980000">
 <tr>
 <td bgcolor="#FFF4F4" width="50%">
 藍色理想首頁
 藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方
 </td>
 <td width="50%">
 藍色理想教程
 藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方
 </td>
 </tr>
 <tr>
 <td width="50%">
 藍色理想資源
 藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方
 </td>
 <td bgcolor="#FFF7F7" width="50%">
 理想論壇
 藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方藍色理想是個可以經常來的好地方
 </td>
 </tr>
 </table>[/html]
[color=Red][size=4][b]5.使用合併和拆分單元格創造複雜造型[/b][/color][/size]
[html]<table cellspacing=0 cellpadding=5 width=400 border=0 align="left">
 <tbody>
 <tr valign=top>
 <td colspan=5></td>
 <td bgcolor=#ffcccc width="54"> </td>
 <td colspan=2></td>
 </tr>
 <tr valign=top>
 <td width="6"></td>
 <td bgcolor=#88bbbb width="56"> </td>
 <td colspan=2></td>
 <td bgcolor=#cc3333 colspan=2 rowspan=2>
 網站服務 
 專業服務
 周到的服務</td>
 <td bgcolor=#ddaaaa width="3"> </td>
 <td></td>
 </tr>
 <tr valign=top>
 <td bgcolor=#99cccc width="6"> </td>
 <td bgcolor=#006666 colspan=2 rowspan=2>
 網站產品 
 全面綜合網站服務
 讓你滿意！
    
  </td>
 <td width="20"><img src="/images/23pixels.gif" width="50" height="5"></td>
 <td colspan=2 rowspan=2> </td>
 </tr>
 <tr valign=top>
 <td width="6"></td>
 <td bgcolor=#254D78 colspan=3 rowspan=3>
 藍色理想
 更高的理想
 </td>
 </tr>
 <tr valign=top>
 <td colspan=2></td>
 <td bgcolor=#77aaaa width="54"> </td>
 <td bgcolor=#B9D3EC colspan=2 rowspan=2> </td>
 </tr>
 <tr valign=top>
 <td width="6"> </td>
 <td bgcolor=#FFCF63 colspan=2 rowspan=4>
 網站資源 
 各種網絡資源
 絕對有你想要的
  
  
  </td>
 </tr>
 <tr valign=top>
 <td bgcolor=#FFE3AD width="6" rowspan="3"> </td>
 <td rowspan=3 width="20">
  
 </td>
 <td width="10" bgcolor=#BDD3EF></td>
 <td colspan=3 bgcolor=#357CC4 rowspan=3>聯繫我們 
 24小時竭誠為您服務</td>
 </tr>
 <tr valign=top>
 <td width="1" bgcolor="#BDD3EF"> </td>
 </tr>
 <tr valign=top>
 <td width="1"> </td>
 </tr>
 </tbody>
 </table>[/html]

不錯不錯！特別是最後一個，令人眼前一亮！

太棒了，全力支持！！！

[ 關閉窗口 ]

E-mail : webmaster@lslnet.com