`
京华倦客
  • 浏览: 124948 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

table用法(转载)

 
阅读更多

一、表格的常用属性
基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、 bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景图片)、 bordercolor(表格边框的颜色),

设置边框颜色 style="border:1px solid #000000;"

二、table边框单线的实现方法

现在给出效果图:

table边框设置 - llsh2010 - 卧Ting昙花现

1、实现方法一:
    <table border="0" cellspacing="1" style="background-color:#a0c6e5">
    实现原理:利用table的单元格之间的间距(cellspacing)和table的背景色来实现

2、实现方法二:
    <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;"><tr>

 

            <td style="border: solid 1px #a0c6e5; height: 20px;">

            </td>

            <td style="border: solid 1px #a0c6e5; height: 20px;">

            </td>

            <td style="border: solid 1px #a0c6e5; height: 20px;">

            </td>

        </tr>

</table>

   实现原理:利用table的border,bordercolor="#a0c6e5"实现table的边框,但是此时的边框太粗,

                    这时就可以用到style属性里的border-collapse:collapse样式

二、表格内部分隔线的属性

起作用的是rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表 格的列;当rules=rows时,就隐藏了纵向的分隔线,也就是我们只能看到表格的行;而当rules=none时,纵向分隔线和横向分隔线将全部隐 藏,我们就只能看到一个表格的外框了。看一下下面的对比效果你就会明白的

a
b
c
a
b
c
a
b
c
这是最普通的表格形式
a
b
c
a
b
c
a
b
c
这是隐藏了横向分隔线的表格,即rules=cols
a
a
a
b
b
b
c
c
c
这是隐藏了纵向分隔线的表格,即rules=rows
a
b
c
a
b
c
a
b
c
这是隐藏了所有内部分隔线的表格,即rules=none

三、表格外部分隔线的属性
表格外边框的显示与隐藏,是可以用frame参数来控制的。注意:只对表格的外边框起作用,对内部边、线不起作用
只显示上边框 <table frame=above>
只显示下边框 <table frame=below> 
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void> 
看一下对比效果吧:

a
b
c
a
b
c
a
b
c
这是最普通的表格形式
a
b
c
a
b
c
a
b
c
这是只显示上边框的表格,即frame=above
a
b
c
a
b
c
a
b
c
这是只显示下边框的表格,即frame=below
a
b
c
a
b
c
a
b
c
这是只显示左、右边框的表格,即frame=vsides
a
b
c
a
b
c
a
b
c
这是只显示上、下边框的表格,即frame=hsides
a
b
c
a
b
c
a
b
c
这是只显示左边框的表格,即frame=lhs
a
b
c
a
b
c
a
b
c
这是只显示右边框的表格,即frame=rhs
a
b
c
a
b
c
a
b
c
这是不显示任何边框的表格,即frame=void
分享到:
评论

相关推荐

    JS组件Bootstrap Table使用方法详解

    JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计...

    【RPA之家转载视频教程7】在UiPath中排序数据表-如何在UiPath中对数据表进行排序-RPA技术中心.rar

    1. 使用DataTable活动:这是最直接的方法,通过“Sort”属性来指定排序的列和排序方式。例如,可以添加一个DataTable活动,设置"SortColumns"属性为需要排序的列名,"SortOrders"属性为排序顺序(升序或降序)。 2....

    javascript排序分页(转载)

    在JavaScript中,数组的排序可以使用`Array.prototype.sort()`方法。这个方法接受一个比较函数作为参数,用于决定元素的排列顺序。比较函数一般有两个参数,如果返回值小于0,那么第一个参数应该排在第二个参数前面...

    本人提供SQL语句大全(转载) 12009年04月28日 星期二 19:35SQL语句大全(转载)

    文件标题和描述中提到的“SQL语句大全”指的是一个包含多种SQL命令和用法的集合,旨在为数据库用户和开发者提供全面的参考资料。这个大全可能包括了数据定义语言(DDL)、数据操纵语言(DML)、数据查询语言(DQL)...

    arthas命令总结(转载)

    2. `asciitable`:将数据以ASCII表格形式展示,便于查看。 3. `class`:查询类信息,如加载状态、类方法等。 4. `console`:启动一个命令行交互式的脚本环境。 5. `dump`:打印对象的字段值和引用关系。 6. `expr`:...

    UltraGrid 控件说明

    * 动态转载样式文件:可以使用 ApplyPresetFromXml 方法从 XML 文件加载样式,实现动态转载样式文件。例如:`this.ultraGrid1.ApplyPresetFromXml(@"C:\Program Files\Common Files\Infragistics" + @"\Presets\Win\...

    转载 纯nasm实现中文操作系统.txt

    具体实现方法未在提供的代码片段中体现,但可以推测可能采用了自定义的中文字符集或编码方案。 #### 3. 内存布局 在`init.asm`文件中提到了系统的内存布局设计,这反映了操作系统的内存管理策略。关键点包括: - ...

    转载的 动力节点 html基础教程一部分 陆续上传

    7. **表格**:`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`定义行,`&lt;th&gt;`定义表头,`&lt;td&gt;`定义数据单元格。 8. **段落与换行**:` `标签用于插入换行,`&lt;p&gt;`标签创建段落,它们是文本布局的基本组件。 9. **链接与导航*...

    GridView使用技巧一

    结构)√(vs200510) 12. 控制结构一(分支)√(vs200511) 13. ...使用方法以及属性√(vs200515) 18. 利用构造函数初始化对象√(vs200516) 19. 重载方法以及运算符重载√(vs200517) 20. 核心对象...

    MySQL 消除重复行的一些方法

    MySQL 消除重复行的一些方法 ---Chu Minfei ---2010-08-12 22:49:44.660 --引用转载请注明出处:http://blog.csdn.NET/feixianxxx */ ----------------全部字段重复------------------------ --1使用表替换来删除...

    定制自己的Linux应用环境(一).pdf

    因此, increase 系统安全的最好方法是尽量监视系统的功能,并根据工作需求和能力来确定哪些服务是必要的。 在 Linux 系统中,可以使用ntsysv命令来启用或关闭系统服务。例如,在 Red Flag 3.0 中,可以使用ntsysv...

    Web新闻正文信息抽取技术研究

    这些方法通过训练分类器来识别和抽取信息,例如使用SVM(支持向量机)、决策树或神经网络等算法。这些方法通常需要标注数据集来训练模型,识别不同信息项的位置和模式。在实际操作中,可以使用诸如XWRAP或RoadRunner...

    MYSQL培训经典教程(共两部分) 2/2

    DESCRIBE语句显示数据表的信息 59 3.4.2 使用mysqlshow 工具得到信息 60 3.4.3 用CREATE TABLE 语句创建数据表 60 3.4.4利用 SELECT 的结果创建表 62 3.4.5 用ALTER TABLE语句修改表的结构 63 3.4.6 ...

    MYSQL培训经典教程(共两部分) 1/2

    DESCRIBE语句显示数据表的信息 59 3.4.2 使用mysqlshow 工具得到信息 60 3.4.3 用CREATE TABLE 语句创建数据表 60 3.4.4利用 SELECT 的结果创建表 62 3.4.5 用ALTER TABLE语句修改表的结构 63 3.4.6 ...

    Apache-Tomcat-8.5.5(Linux )

    解决方法见:http://stackoverflow.com/questions/26893297/tomcat-8-throwing-org-apache-catalina-webresources-cache-getresource-unable-to 尊重他人成果, 转载于http://www.jmatrix.org/day/1186.html

    springmybatis

    其实还有更简单的方法,而且是更好的方法,使用合理描述参数和SQL语句返回值的接口(比如IUserOperation.class),这样现在就可以至此那个更简单,更安全的代码,没有容易发生的字符串文字和转换的错误.下面是详细...

    Auntion TableSort(最新修改,支持Float,支持锁定不排序行)

    调用方法参考"使用实例_1.htm" Add by ddgboy in 20090428 QQ:7785526 ----------------------------------------------------------------------------- Auntion TableSort 测试交流第一版 (下一版将会存在部分...

    GridView使用技巧二

    结构)√(vs200510) 12. 控制结构一(分支)√(vs200511) 13. ...使用方法以及属性√(vs200515) 18. 利用构造函数初始化对象√(vs200516) 19. 重载方法以及运算符重载√(vs200517) 20. 核心对象...

    latex-ctexfaq

    ### CTEX FAQ(常见问题集) #### A. 关于FAQ 1. **CTEX是干什么的?** - CTEX项目旨在提供一套完整的中文LaTeX解决方案,它不仅包含了一套全面的中文支持环境,...需要转换成其他格式或使用PS转PDF的方法。 53. **...

Global site tag (gtag.js) - Google Analytics