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

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

第一种:单格样式,可以不定义宽度,把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 ο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>
### 回答1: Web在线编辑表格插件是一种应用程序,它让用户可以在网站上直接在浏览器中进行编辑、创建和修改数据表格。这种插件有多种功能,包括数据的排序、筛选和搜索功能,还可以添加图表和统计功能。该插件通常使用JavaScript和HTML等前端技术实现。 这种插件的优点之一是方便快捷,不需要额外安装电脑软件,只需通过浏览器即可解决表格编辑问题。此外,该插件还可以与其他应用程序进行整合,例如与Excel自动同步数据。 实际上,Web在线编辑表格插件已经成为现代网站中常用的工具之一,特别是在企业和学术组织中,它们需要经常进行大量数据的处理和更新。而采用这种插件,可以大大提高工作效率,使得数据管理更加高效、规范和精确。 当然,Web在线编辑表格插件也存在一些限制,例如数据的安全性、可靠性和数据格式的兼容性需要考虑,而这些问题都需要插件开发商不断完善和改进。总之,Web在线编辑表格插件在数据管理中的价值无可置疑,随着人工智能和云计算等技术的发展,未来该插件的应用范围会更加广泛。 ### 回答2: Web在线编辑表格插件是一种应用于网页的工具,能够使用户可以方便地在网页上编辑表格内容而不需要离开网页环境。该插件可以极大地方便用户在网页中处理表格数据,无需下载到电脑中再进行编辑,提高了工作效率。 这种插件一般都有着比较简单的操作方式,对于没有编程知识的用户也可以轻松使用。通过简单的拖拽,用户可以轻松地增加、删除、调整行或列。此外,还可以对表格数据的格式和样式进行设置,如字体、颜色、边框等。 除此之外,Web在线编辑表格插件还支持多种数据导入和导出方式,用户可以将表格数据保存在自己的电脑中或直接上传到云端。同时,这种插件可以自动保存用户的操作,确保用户不会因为数据丢失而烦恼。 总之,Web在线编辑表格插件是一种实用、高效、方便的工具,特别是对于处理表格数据较多的用户而言,是一种必不可少的应用。 ### 回答3: Web在线编辑表格插件是一种工具,能够让用户在网页上方便地编辑、管理和操作表格数据。它常被用于企业内部管理系统、云端服务、数据统计分析等领域。此插件可以使网站的交互性更强,用户可以在网页上直接插入数据或在表格中进行编辑。 Web在线编辑表格插件具有以下几个优点: 首先,它不需要用户下载或安装任何软件,只需要进入网页即可进行编辑,极大方便了用户的操作。 其次,此插件具有详细的数据校验和数据格式控制功能,用户可以很轻易地确保不合法的数据不会被输入和上传。 同时,它也支持常见的表格操作功能,如筛选、排序、搜索等,用户可以根据需求进行自由操作。 最后,此插件还具有数据自动保存功能,用户退出网页或断网后,数据依然被保存在网页中,用户下次打开此网页时可以继续编辑。 总之,Web在线编辑表格插件是一种非常实用的工具,它使数据操作更加便捷和高效,大大提升了用户的工作效率和娱乐体验。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值