表格特效代码全集中 - -
1. 两种细线表格做法
源码如下:
<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>
2. 立体表格
源码如下:
<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
3. 另类圆角表格制作
源码如下:
原图:
<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>
4. 虚线边框表格
源码如下:
<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;">
5. 分类型表格
源码如下:
<fieldset>
<legend>item</legend>
content
</fieldset>
6. 变色的单元格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>
7. 变色的单元格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>
8. 变色的单元格3,通过mouse事件做.有点微软的味道
源码如下:
<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>
9. 透明表格
<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
<tr><td><center>cnbruce</td></tr>
</table>
10. 表格边框显示外阴影
源码如下:
<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>
11. VML代码实现的圆角表格
(1).
源码如下:
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
(2).
源码如下:
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:path textpathok="true" />
<v:textpath on="true" string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce" />
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
(3).
源码如下:
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5>
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
本文引自:http://aliax.bokee.com/2371127.html
分享到:
相关推荐
jquery表格标题固定特效代码是一款jquery表格控件表格顶部和表格左侧标题固定的表格特效代码。
表格复选按钮和选中变色特效代码 不错的表格排序 漂亮简洁的表格特效代码 鼠标经过表格变色效果 鼠标经过显示产品图片js特效代码
用css实现孤形表格效果特效代码-CSS代码特效
JQUERY输入提醒表格表单特效代码下载
JS实现漂亮的表格table特效代码,四五种效果可选择哦
jquery表格标题固定特效代码是一款jquery表格控件表格顶部和表格左侧标题固定的表格特效代码。
超多CSS Div圆角特效代码集,有DIV圆角,圆角菜单、圆角列表、圆角混合布局、圆角图片边框等,一共有10款圆角框效果,全部兼容ie8、火狐或Chrome浏览器,没有用到CSS3,传统CSS技术实现,是学习CSS的好资料。
表格特效代码全集中 如细线表格 有凹凸效果的表格 虚线表格 多彩表格 立体表格 外阴影表格等
js表格自由拖拽排序特效代码,点击表格头部栏目可根据当前项进行排序,拖动每一列表格可自由拖放表格列的位置。
自适应Table表格样式代码是一款div css3响应式表格特效。
用css实现孤形表格效果特效代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
介绍: 1.代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联...用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码(以后有时间更新) 7.兼容性测试:已
jquery table ui插件制作css表格隔行变色特效代码
HTML5漂亮的立体表格特效,CSS3制作的圆角立体边框表格效果(通过css3设置圆角绘边框)。没有使用图片,但阴影效果很漂亮,看上去过滤很平滑,不过在打开网页的时候,似乎渲染的时间比较长。
jQuery实现table表格鼠标经过隔行换颜色特效代码.zip
自适应Table表格样式代码是一款div css3响应式表格特效。
html初级教程 :html语言基础、表格与表单、样式表、样式表应用、html特效代码、heml常用代码、网络学习、css样式
jQuery表格添加行数据代码是一款可以在行内添加编辑删除的表格代码。