zoukankan
html css js c++ java
各式各样的表格样式源代码
作者:未知 来源:转载
三、表格边框
普
表
通
格
这是一普通的表格
<table border="1" width="200" cellpadding="0" cellspacing="0"> <tr align="center"> <td>普</td> <td>表</td> </tr> <tr align="center"> <td>通</td> <td>格</td> </tr> </table>
细
表
线
格
表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)
<table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" > <tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">细</td> <td bgcolor="#FFFFFF">表</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">线</td> <td bgcolor="#FFFFFF">格</td> </tr> </table>
细
表
线
格
这和上面那个可不一样,它用的是CSS,效果却一样。
(对单元格border的定义)
<table width="200" cellspacing="0" cellpadding="0"> <tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">细</td> <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td> </tr> <tr align="center"> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">线</td> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td> </tr> </table>
细
表
线
格
再进一步,把边框变成虚线,同样是CSS的神奇作用。
<table width="200" cellspacing="0" cellpadding="0"> <tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">细</td> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td> </tr> <td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">线</td> <td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td> </tr> </table>
细线表格的扩展应用,奥妙就是在第个单元格中再套入一个表格。
<table width="200" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> </tr> </table>
立
表
体
格
立体感的表格
(简单的亮暗边框设置,注意只有IE支持这种效果)
<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"> <tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td> </tr> <tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td> </tr> </table>
无名表格
给表格加上一个表头
(应用<fieldset>和</legend>标签)
<table width="200" cellpadding="0" cellspacing="0"> <tr> <td><fieldset style="200" align="center"> <legend> 无名表格 </legend> <p align="right"> </fieldset></td> </tr> </table>
表中表效果Ⅰ
给表头再加个框
(用CSS为<legnd>定义一个边框)
<table width="200"" cellspacing="0" cellpadding="0"> <tr> <td> <fieldset style=" 200; color: #B7B7B7; border-style: groove" align="center"> <legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend> <br> </fieldset> </td> </tr> </table>
表中表效果Ⅱ
看起来和上面的一样,可是这个才是真正的表中表哦。
(在<legnd>中插入一个表格)
<table width="200"> <tr> <td><fieldset style="200" align="center"> <legend> <table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20"> <tr> <td><font color=blue>表中表效果Ⅱ</font></td> </tr> </table> </legend><br> </fieldset> </td> </tr> </table>
keim,毕业于安徽科技学院理学院,2003年开始对Web开发有浓厚的兴趣,并专注于C#/java Web开发,软件架构设计、分布式相关、项目管理、前端设计等等,实战派...
查看全文
相关阅读:
OSX安装nginx和rtmp模块(rtmp直播服务器搭建)
用runtime来重写Coder和deCode方法 归档解档的时候使用
Homebrew安装卸载
Cannot create a new pixel buffer adaptor with an asset writer input that has already started writing'
OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播
让nginx支持HLS
iOS 字典转json字符串
iOS 七牛多张图片上传
iOS9UICollectionView自定义布局modifying attributes returned by UICollectionViewFlowLayout without copying them
Xcode6 iOS7模拟器和Xcode7 iOS8模拟器离线下载
原文地址:https://www.cnblogs.com/zqmingok/p/1514116.html
最新文章
abiword rtf 解析
《将博客搬至CSDN》
创建数据库、表以及索引
C#代码计时
Google Chrome源码剖析【序】
数据格式化
形参、实参、返回值
Cstring获取第N个字符
vc获取时间戳
用 C 语言编写 Windows 服务程序的五个步骤
热门文章
sentinel 搭建
java 1.8 stream 随笔
SpringBoot feign使用
接口代理
java 之 解释器模式(大话设计模式)
java 之 享元模式(大话设计模式)
java 之 中介模式(大话设计模式)
java 之 职责链模式(大话设计模式)
java 之 命令模式(大话设计模式)
java 之 桥接模式(大话设计模式)
Copyright © 2011-2022 走看看