菜鸟之家_电脑爱好者 - 我菜但我热爱,一个菜鸟站长的成长历程!
电脑入门级教程网站,一直致力于为电脑初学者提供动力,为菜鸟级中小站长提供图文并茂、通俗易懂的教程!

十种简单实用漂亮的HTML表格样式

收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格,会显得段落分明的效果,收到意想不到的效果。

第一种:单格样式,可以不定义宽度,把width="100%"去掉即可:
菜鸟之家_电脑爱好者 
<table cellspacing="0" bordercolordark="#efefef" width="100%"  bordercolorlight="#333333" border="0">
    <tbody>
        <tr bgcolor="#cccccc">
            <td>菜鸟之家_电脑爱好者</td>
        </tr>
    </tbody>
</table>

第二种:细线表格,代码如下:
菜鸟之家_电脑爱好者
<table width="100%" border="1" bordercolor="#000000">
   <tr bordercolor="#FFFFFF">
     <td>表格边线为1,线色为黑,行线色为白。</td>
   </tr>
</table>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
   <tr>
     <td bgcolor="#FFFFFF">表格边线为0,间距为1,背景色为黑,行背景色为白。</td>
   </tr>
</table>

第三种:立体表格,代码如下:
菜鸟之家_电脑爱好者
<table   border=1 cellspacing=0   width=100% bordercolorlight=#333333  bordercolordark=#efefef>
   <tr bgcolor=#cccccc>
     <td>菜鸟之家_电脑爱好者</td>
     <td>菜鸟之家_电脑爱好者</td>
     <td>菜鸟之家_电脑爱好者</td>
     <td>菜鸟之家_电脑爱好者</td>
   </tr>
   <tr bgcolor=#cccccc>
     <td>08zx.com</td>
     <td>08zx.com</td>
     <td>08zx.com</td>
     <td>08zx.com</td>
   </tr>
</table>
<center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc

第四种:边框虚线表格,代码如下:
菜鸟之家_电脑爱好者
<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT: #000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td class="tb"><center>www.08zx.com</td>
   </tr>
</table>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">

第五种:分类表格,代码如下:
菜鸟之家_电脑爱好者
<fieldset>
<legend>菜鸟之家</legend> 
电脑爱好者 08zx.com 
</fieldset>

第六种: 第1种变色单元格,通过a:hover做,代码如下:
菜鸟之家_电脑爱好者
<style>
a:link,a:visited,a:hover
{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>
<TABLE width=100% cellspacing=1 bgcolor=black >
   <TR>
     <TD><a href="#">Blueidea
     <TD><a href="#">.com
   <TR>
     <TD><a href="#">CNBruce
     <TD><a href="#">.com
</TABLE>

第七种: 第2种变色单元格,通过CSS实现,体现透明效果 ,代码如下:
菜鸟之家_电脑爱好者
<style type="text/css">
.aa
{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}
.bb
{ background-color:#3366cc; color:#ffffff}
</style>
<table   width="100%">
   <tr>
     <td   onmouseover="this.className=’aa’" onmouseout="this.className=’bb’"  class="bb"><center><b>cnbruce</td>
    </tr>
</table>

第八种:第3种变色单元格,通过鼠标事件实现,代码如下:
菜鸟之家_电脑爱好者
<table width="100%" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
   <tr>
     <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left"> Blueidea</div></td>
   </tr>
   <tr>
     <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"> cnbruce</td>
   </tr>
</table>

第九种: 透明的表格,代码如下:
菜鸟之家_电脑爱好者
<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100  border=0> 
<tr><td><center>cnbruce</td></tr>
</table>

第十种: 边框有外阴影效果,代码如下:
菜鸟之家_电脑爱好者
<table   align=center   width=200   height=100   bgcolor=#f3f3f3  style="filter:progid:DXImageTransform.Microsoft.Shadow  (Color=#333333,Direction=120,strength=5)">
   <tr>
     <td><center>www.08zx.com</td>
   </tr>
</table>

标签:网页HTML设计
分类:网站建设| 发布:网络咖啡| 查看: | 发表时间:2013/4/14
原创文章如转载,请注明:转载自菜鸟之家_电脑爱好者 本文链接:http://dingguangqun.com/article/776.html
上一篇 » 京东收购“网银”双拼域名用于网银在线 下一篇 » 新手站长成长三部曲

已经有 ( 1 ) 位网友发表了评论,你也评一评吧!

还不错哦
http://www.schydl.com2014/1/26 11:19:03 回复
Design By XvDesign.Com | Login | Power By Z-Blog 2.3 Avengers Build 180518.