收藏十一种常用简单实用漂亮的HTML表格样式
来源:互联网 发布:多态zpn官网mac 编辑:程序博客网 时间:2024/04/30 19:20
收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格,会显得段落分明的效果,收到意想不到的效果。我下面用的是第三种效果
第一种:单格样式,可以不定义宽度,把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
第四种:圆角另类表格,代码如下:
<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 onmouseover="this.className=’aa’" onmouseout="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=#f3f3f3style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
<tr>
<td><center>www.cnbruce.com</td>
</tr>
</table>
- 收藏十一种常用简单实用漂亮的HTML表格样式
- 8款设计师常用漂亮的HTML CSS表格样式
- 漂亮的表格 .html
- 漂亮的HTML表格
- 漂亮的html表格
- 漂亮的HTML表格
- 几个漂亮的表格样式
- 漂亮的html表格源码
- CSS实例(一):漂亮的表格样式
- 漂亮表格样式运用
- HTML中表格和表单的简单构造和样式
- 纯css打造漂亮的html表格
- html表格的css样式
- 漂亮的表格样式(使用CSS样式表控制表格样式)
- 漂亮的表格样式(使用CSS样式表控制表格样式)
- 漂亮的表格样式(使用CSS样式表控制表格样式)
- 漂亮的表格样式(使用CSS样式表控制表格样式)
- 一个漂亮的表格样式 适合数据统计
- OGNL表达式struts2标签“%,#,$”
- 3D游戏图形技术解析
- get_the_ID 取得当前PAGE 或是POST 的ID
- UVa 10746 Crime Wava-The Sequel (最小费用最大流 + 精度)
- 将一列的多行数值转化为字符串
- 收藏十一种常用简单实用漂亮的HTML表格样式
- simpleXML怎样解析一个xml文件,并对xml进行增删改查 过程
- Java再爆漏洞,甲骨文紧急修复
- [cocos2d-x] -- Win7下配置Cocos2d-x开发环境
- 通过document.getElementsByName来实现 复选框的全选,全部选,反选
- 完成图片动态切换
- 微软12年老将 Philip Su 的离职信
- Linux下将普通软件启动方式做成service方式
- 分表处理设计思想和实现