收藏⼗⼀种常⽤简单实⽤漂亮的HTML表格样式
收集了⼗⼀种常⽤简单漂亮的表格样式。有时候⽤⽂章中⽤上表格，会显得段落分明的效果，收到意想不到的效果。我下⾯⽤的是第三种效果
第⼀种：单格样式，可以不定义宽度，把width="100%"去掉即可：
<table cellspacing="0" bordercolordark="#efefef"
width="100%"
bordercolorlight="#333333" border="0">
<tbody>
<tr bgcolor="#cccccc">
<td>晓龙⼯作室</td>
</tr>
</tbody>
</table>
<p> </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>
html网页设计 table <td>it365cn</td>
<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>
<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</td>
</tr>
</table>
<p>
虚线直线1
<hr size=1 >
虚线直线2
<p size=1 >第六种：分类表格，代码如下：
<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="#">
<TR> <TD><a href="#">CNBruce
<TD><a href="#"> </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 οnmοuseοver="this.className=’aa’"
οnmοuseοut="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
width=200
height=100
border=0>
<tr><td><center>cnbruce</td></tr>
第⼗⼀种： 边框有外阴影效果，代码如下：
</table>
<table align=center width=200 height=100
bgcolor=#f3f3f3
>
<tr>
<td><center>wwwbruce</td>
</tr>
</table>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。