当前位置:首页 > 佳人才 > 网事随风 >

 

十一种常用简单漂亮的表格样式

2020-04-02 19:22发布到网事随风 浏览

简介收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格,会显得段落分明的效果,收到意想不到的效果。我下面用的是第三种效果 第一种:单格样式,可以不定义宽度,把width=100...

收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格,会显得段落分明的效果,收到意想不到的效果。我下面用的是第三种效果
 
第一种:单格样式,可以不定义宽度,把width="100%"去掉即可:
 
 
<table cellspacing="0" bordercolordark="#efefef" width="100%"
 
bordercolorlight="#333333" border="0">
    <tbody>
        <tr bgcolor="#cccccc">
            <td>晓龙工作室</td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
 
 
 
 
 第二种:细线表格,代码如下: <table width="100%" border="1" bordercolor="#000000">
   <tr bordercolor="#FFFFFF">
     <td>表格边线为1,线色为黑,行线色为白。</td>
   </tr>
</table>
<p>
<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>it365cn</td>
     <td>it365cn</td>
     <td>it365cn</td>
     <td>it365cn</td>
   </tr>
   <tr bgcolor=#cccccc>
     <td>cnbruce</td>
     <td>cnbruce</td>
     <td>cnbruce</td>
     <td>cnbruce</td>
   </tr>
</table>
<center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc
 
 
 
第四种:圆角另类表格,代码如下: 
 
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
   <tr height=1>
     <td rowspan=4 width=1></td>
     <td rowspan=3 width=1></td>
     <td rowspan=2 width=1></td>
     <td width=2></td>
     <td bgcolor=#43B5C9></td>
     <td width=2></td>
     <td rowspan=2 width=1></td>
     <td rowspan=3 width=1></td>
     <td rowspan=4 width=1></td>
   </tr>
   <tr height=1>
     <td bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
   </tr>
   <tr height=1>
     <td bgcolor=#43B5C9></td>
     <td colspan=3 bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
   </tr>
   <tr height=2>
     <td bgcolor=#43B5C9></td>
     <td colspan=5 bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
   </tr>
</table>
<p>放大
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>
   <tr height=10>
     <td rowspan=4 width=10></td>
     <td rowspan=3 width=10></td>
     <td rowspan=2 width=10></td>
     <td width=20></td>
     <td bgcolor=#43B5C9></td>
     <td width=20></td>
     <td rowspan=2 width=10></td>
     <td rowspan=3 width=10></td>
     <td rowspan=4 width=10></td>
   </tr>
   <tr height=10>
     <td bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
   </tr>
   <tr height=10>
     <td bgcolor=#43B5C9></td>
     <td colspan=3 bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
   </tr>
   <tr height=20>
     <td bgcolor=#43B5C9></td>
     <td colspan=5 bgcolor=#43B5C9></td>
     <td bgcolor=#43B5C9></td>
   </tr>
</table> 
 
 
 第五种:边框虚线表格,代码如下:<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.blueidea.com</td>
   </tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">
 
 
 
第六种:分类表格,代码如下: <fieldset>
<legend>item</legend>
content
</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.cnbruce.com</td>
   </tr>
</table> 
 
  


【如下是源代码的效果消失】———



收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格,会显得段落分明的效果,收到意想不到的效果。我下面用的是第三种效果 第一种:单格样式,可以不定义宽度,把width="100%"去掉即可:
晓龙工作室

 

第二种:细线表格,代码如下:
表格边线为1,线色为黑,行线色为白。

 

表格边线为0,间距为1,背景色为黑,行背景色为白。
第三种:立体表格,代码如下:
it365cn it365cn it365cn it365cn
cnbruce cnbruce cnbruce cnbruce
表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc 第四种:圆角另类表格,代码如下:
                 
     
     
     

放大

                 
     
     
     
第五种:边框虚线表格,代码如下:
www.blueidea.com

虚线直线1


虚线直线2

第六种:分类表格,代码如下:

item content
第七种: 第1种变色单元格,通过a:hover做,代码如下:
Blueidea .com
CNBruce .com
第八种: 第2种变色单元格,通过CSS实现,体现透明效果 ,代码如下:
cnbruce
第九种:第3种变色单元格,通过鼠标事件实现,代码如下:
cnbruce
第十种: 透明的表格,代码如下:
cnbruce
第十一种: 边框有外阴影效果,代码如下:
www.cnbruce.com
 

 

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:HTML CSS标签属性大全

下一篇:没有了

热搜关键词 更多 >

 


2019优才成长故事
 

【视频时长:09:34】  
    广告位

本栏推荐

    广告位

站点信息