最新消息:我来了,你来了吗

收藏十一种常用简单实用漂亮的HTML表格样式

心得摘录 百味人生 14733浏览 0评论

 

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

第一种:单格样式,可以不定义宽度,把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>

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 这小东西经常会使用过~收藏一下
    阿飞 China Mozilla Firefox Windows 4年前 (2014-10-15)回复