本文引自：http://aliax.bokee.com/2371127.html
表格特效代码全集中 - -
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>
- 作者： aliax
分享到：
相关推荐
本知识点将深入探讨“jquery表格标题固定特效代码.zip”这个压缩包中的内容，它提供了在网页中实现表格标题固定效果的解决方案。 在网页设计中，特别是在大数据量的表格展示时，确保表格的列标题和行标题在滚动时...
用css实现孤形表格效果特效代码-CSS代码特效
另外，`鼠标经过显示产品图片js特效代码.rar`是一个压缩包，可能包含实现该特效的JavaScript代码和图片资源。要查看和学习这些特效的具体实现，可以解压这个文件，并在浏览器中打开`.htm`文件来查看运行效果。 总的...
标题 "JQUERY输入提醒表格表单特效代码下载.rar" 暗示了这是一个关于使用jQuery实现的表单输入验证和提示效果的代码资源。在Web开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等...
4. **表格插件**：虽然可以纯用JavaScript和CSS实现复杂的表格特效，但通常我们会使用一些成熟的JavaScript表格库，如jQuery DataTables、Handsontable、ag-Grid等。这些插件提供了丰富的功能和自定义选项，如排序、...
"JS实现漂亮的表格table特效代码"这个项目提供了四五种不同的效果，帮助开发者实现动态、交互性强的表格展示，提升用户体验。以下是对这些知识点的详细解析： 1. **HTML表格基础**：在HTML中，`<table>`元素是创建...
在“表格特效样式魔鬼教程”中，我们将深入探讨如何利用HTML和相关的CSS（Cascading Style Sheets）技术来创建具有独特边框样式的表格，提升网页的视觉效果。 1. **表格的基本结构**： HTML表格由`<table>`标签...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态...同时，随着前端技术的发展，如Vue.js、React等框架也提供了更多表格组件和解决方案，进一步丰富了表格特效的实现方式。
网页特效是提升网站用户体验的重要手段，这些特效代码的收藏涵盖了多个方面，旨在让网页更加生动有趣，同时也提高用户的互动性和功能性。以下是对每个文件名所代表的网页特效的详细解释： 1. **全国省市县无刷新...
超多CSS Div圆角特效代码集，有DIV圆角，圆角菜单、圆角列表、圆角混合布局、圆角图片边框等，一共有10款圆角框效果，全部兼容ie8、火狐或Chrome浏览器，没有用到CSS3，传统CSS技术实现，是学习CSS的好资料。
在本案例中，“HTML5立体表格特效.rar”提供了一个利用这两项技术实现的立体效果表格，具体表现为圆角边框和阴影效果。下面将详细阐述相关知识点。 1. **HTML5表格**：HTML5中的`<table>`元素用于创建表格，它包含`...
综上所述，通过CSS和`div`的结合使用，我们可以实现对HTML表格的全方位定制，包括边框控制、颜色调整、对齐方式、布局样式以及视觉特效等，以满足不同网页设计的需求。而提供的压缩包文件“css的表格控制”很可能...
用css实现孤形表格效果特效代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
这个"js表格自由拖拽排序特效代码.zip"压缩包提供了一个解决方案，让我们来深入了解一下其中涉及的关键技术和知识点。 首先，我们需要知道的是HTML表格（`<table>`元素）是网页中用于组织结构化数据的基本组件。在...
介绍： 1.代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联...用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码(以后有时间更新) 7.兼容性测试:已
"JS+CSS的table表格特效"是一个利用JavaScript（JS）和层叠样式表（CSS）来增强HTML表格功能的例子，旨在提高用户体验并增加交互性。在这个项目中，我们可以看到几个关键的技术点： 1. **复选框全选**：这是表格中...
"jquery表格标题固定特效代码"是针对使用jQuery来实现的一种功能，它旨在解决在大数据量表格中，当用户滚动页面时，表格的标题行和列头不再可见的问题。这种效果提高了用户体验，使用户始终能够清楚地看到当前查看的...
根据给定文件的信息，我们可以总结出以下关于HTML文字特效代码的相关知识点： ### 一、HTML 文字特效概述 HTML（HyperText Markup Language）是用于创建网页的标准标记语言。通过使用HTML，可以添加各种元素到网页...
"调整表格特效代码"是一个专门针对这种需求的解决方案，它利用jQuery库来实现表格列宽的动态调整，提升用户体验。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得开发者能够更高效...