收藏十一种常用简单实用漂亮的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>
<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

第四种：圆角另类表格，代码如下：

第五种：边框虚线表格，代码如下:

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做，代码如下：

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实现，体现透明效果，代码如下：

<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 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>

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

C#一种最简单实用安全的单例模式，也是线程安全的
public class Aclass {//1,readonly,杜绝外部销毁:Aclass.get = null//在大型项目中,单例销毁与重生很容易造成[同一单例不同实例],从而引起各种诡异的B ...
Python中利用openpyxl对Excel的各种相关详细操作（二十一种常用操作＜代码+示例＞）
目录一.对工作簿中对应工作表的相关操作 1.创建工作簿.工作表并指定活动工作表 2.加载创建的工作簿.修改工作表名字 3.复制活动工作表 4.删除指定工作表二.对工作表中行.列.单元格的相关操作 ...
wps 选择高亮_简单实用：一组WPS表格技巧
小伙伴们好啊,今天咱们来分享一组WPS表格中的实用技巧,点滴积累,也能提高工作效率.表格核对两眼花,丈母娘看成孩他妈.对于重复的身份证号.银行卡号等等进行识别,目测可是不太方便.选中数据区域,数据→高 ...
简单实用的jQuery实现表格筛选功能
$("tr:contains('关键词')").addClass("selected");// 结合filter的筛选方法,可以实现表格的过滤. $(funct ...
收集的常用css页面及表单表格样式
一.红色按钮 .redbuttoncss { font-family: "tahoma", "宋体"; font-size: 9pt; colo ...
曲线聚类_机器学习入门必读：6种简单实用算法及学习曲线、思维导图
来源:大数据DT 本文约3500字,建议阅读7分钟本文为你介绍掌握机器领域知识的学习曲线.技术栈以及常用框架. [ 导读 ] 大部分的机器学习算法主要用来解决两类问题--分类问题和回归问题.在本文当 ...
机器学习入门必读：6种简单实用算法及学习曲线、思维导图
来源:大数据DT 本文约3500字,建议阅读7分钟本文为你介绍掌握机器领域知识的学习曲线.技术栈以及常用框架. [ 导读 ] 大部分的机器学习算法主要用来解决两类问题--分类问题和回归问题.在本文当 ...
Emscripten 单词_分享15个英语单词记忆方法，简单实用，赶紧收藏吧！
分享15个英语单词记忆方法,简单实用,赶紧收藏吧! 单词是学习英语的基石,英语程度的好坏,单词是最重要的衡量标准.单词的构成方式其实很简单,就是26个字母的排列组合. 那有什么方法能够让我们更好地把单 ...
XP系统优化简单实用技法收藏
XP系统优化简单实用技法收藏 1.关闭计算机时自动结束任务: 在关机的时候,有时会弹出讨厌的对话框,提醒某个程序仍在运行,是否结束任务.其实完全梢酝ü坏愕阈薷娜肳indows自动结束这些仍在运行的程 ...
计算机五种快捷键,5种常用的电脑截图技巧，你都知道吗？学会赶紧收藏
原标题:5种常用的电脑截图技巧,你都知道吗?学会赶紧收藏无论是在生活中还是在工作中,我们竟然会用到电脑截图,虽说简单,但对于一些网页弹窗一闪而过的,我们大都来不及截图就闪过去了.今天老毛桃就跟大家聊 ...

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

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

最新文章

热门文章