常用的表格形式
2007-05-27 08:01
766 查看
一、表格中单元格之间分隔线的隐藏方法 |
| 这个表格去掉了单元格之间的横向分隔线(rules=cols) | |||||||||
| 这个表格去掉了单元格之间的纵向分隔线(rules=rows) | |||||||||
| 这个表格去掉了单元格之间的纵向分隔线和横向分隔线(rules=none) | |||||||||
其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。 |
二、表格边框的隐藏 |
| 这是一普通的表格 | ||||
| 只显示上边框(frame=above) | ||||
| 只显示下边框(frame=below) | ||||
| 只显示左、右边框(frame=vsides) | ||||
| 只显示上、下边框( frame=hsides) | ||||
| 只显示左边框( frame=lhs) | ||||
| 只显示右边框(frame=rhs) | ||||
| 不显示任何边框(frame=void) | ||||
表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void> |
三、表格边框 |
| <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> | ||||||||
(对单元格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> | ||||||||
| <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="width: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="width: 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="width: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> | ||||||||
相关文章推荐
- 4000 struts2页面下载,从数据库把数据以excel表格形式导出
- Latex范例,包含了公式,图片,表格,标题,交叉引用等常用功能
- Excel2013 表格常用技巧
- WPS将网上下载的文本文档数据转换为WPS表格文档形式
- POI表格常用方法
- Mutex 和 Critical Section 的异同 - 表格形式,一目了然
- 以逗号为分隔的文本文件怎样用EXCEL打开为表格的形式
- 数组数据转换成json形式,用于jqgrid初始化表格
- 常用的div ul li css样式 详细的UL-LI样式三种形式
- 表格字段常用注解@NotBlank @NotEmpty @NotNul @Pattern
- 将ASP纪录集输出成n列的的表格形式显示的方法
- html常用标签及属性(表格/table,td)
- 将数据库中的内容以表格形式显示到页面的div中
- SQL多表格查询合并至单一声明的常用方式
- 单例模式的三种常用的形式
- Git 常用命令速查表(图文+表格)
- java增强for和循环常用形式
- 使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来,并具有动态排序、动态生成查询、自动分页功能
- 函数调用规范__cdecl和__stdcall的区别一目了然(表格形式)
- Html表格常用技巧