收藏十一种常用简单实用漂亮的HTML表格样式
2013-03-05 19:30
555 查看
收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格,会显得段落分明的效果,收到意想不到的效果。我下面用的是第三种效果
第一种:单格样式,可以不定义宽度,把width="100%"去掉即可:
第二种:细线表格,代码如下:
第三种:立体表格,代码如下:
第四种:圆角另类表格,代码如下:
第五种:边框虚线表格,代码如下:
第六种:分类表格,代码如下:
第七种: 第1种变色单元格,通过a:hover做,代码如下:
第八种: 第2种变色单元格,通过CSS实现,体现透明效果 ,代码如下:
第九种:第3种变色单元格,通过鼠标事件实现,代码如下:
第十种: 透明的表格,代码如下:
第十一种: 边框有外阴影效果,代码如下:
第一种:单格样式,可以不定义宽度,把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> |
<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> |
<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> |
<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> |
相关文章推荐
- 8款设计师常用漂亮的HTML CSS表格样式
- html常用标签表单和表格等及css的简单入门
- 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
- 一个简单但常用的表格样式--鼠标划过行变色--简洁实现
- 一个简单但常用的表格样式--鼠标划过行变色--简洁实现
- 一个简单但常用的表格样式--鼠标划过行变色--简洁实现 (2)
- 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
- HTML中表格和表单的简单构造和样式
- 一个简单但常用的表格样式--鼠标划过行变色--简洁实现
- 改变HTML中超链接的显示样式 分类: C1_HTML/JS/JQUERY 2014-08-27 10:11 595人阅读 评论(0) 收藏
- [转]CSS如何设置html table表格边框样式
- 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!
- CSS如何设置html table表格边框样式 CSS如何设置table表格边框样式 对table设置css样式边框,分为几种情况: 1、只对table设置边框 2、对td设置边框 3、对table和
- 商城常用滚动的焦点图效果代码简单实用
- 商城常用滚动的效果,代码简单实用,学习的好例子
- HTML基础之简单常用标签
- AngularJS表格样式简单设置方法示例
- #学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML
- 简单实用的选择框样式
- 漂亮的表格样式(使用CSS样式表控制表格样式)