`
zhuhuide2004
  • 浏览: 143985 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

【转】table的边框属性设置总结

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

二、表格内部分隔线的属性
起作用的是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
为了您的安全,请只打开来源可靠的网址

打开网站     取消

来自: http://hi.baidu.com/zzcc%5F8/blog/item/e799daad7b7681004a36d676.html
分享到:
评论

相关推荐

    html为内边框加颜色而嵌套TABLE边框不显示出来的两种方法.pdf

    总结起来,这两种方法都有效地解决了嵌套表格边框不显示的问题,但实现方式不同。第一种方法利用CSS控制边框的显示与隐藏,第二种方法则依赖于HTML属性来模拟边框效果。在实际开发中,根据项目需求和浏览器兼容性...

    CSS设置网页table边框样式.pdf

    最后,`border`属性是所有边框属性的总括简写,可以包含边框宽度、样式和颜色,如`border: 1px solid blue;`将设置元素所有边框为1像素宽的蓝色实线。 总结来说,通过CSS,我们可以精确地控制网页table的边框,包括...

    table中的border-collapse属性

    在这个例子中,由于`border-collapse`属性被设置为`collapse`,所有单元格之间的边框都被合并成单一的边框。因此,单元格B和单元格D之间的边框将显示为黄色(因为3px比1px宽),而单元格A和单元格B之间的边框将显示...

    网页制作之table属性总结

    ### 网页制作之table属性总结 在网页设计与开发的过程中,`table`标签扮演着重要的角色。尽管现代Web开发更多地倾向于使用CSS Grid和Flexbox进行布局,但在处理复杂的数据展示时,表格(`table`)仍然是不可或缺的...

    HTML表格边框设置方法

    本教程将详细讲解如何设置...总结起来,HTML表格边框的设置涉及到多个CSS属性,包括边框宽度、样式、颜色、合并、单元格边框以及响应式设计等方面。掌握这些知识点,就能灵活地定制表格的外观,满足网页设计的需求。

    使用css如何操作Table没有外边框只有内边框

    这个属性设置为`collapse`时,会使得相邻的单元格边框合并,从而形成内边框。 在给出的示例代码中,我们看到以下CSS规则: ```css table { border-collapse: collapse; border: 0px solid #999; } ``` 这里,`...

    一个属性border-collapse解决Table的边框问题

    在网页设计中,表格(Table)...总结来说,border-collapse属性是解决网页中表格边框问题的一个简单而有效的CSS属性。它允许设计师以更简洁的代码实现更加整洁和专业的表格外观,是现代网页设计中不可或缺的一个工具。

    隐藏 表格 边框 的设置

    总结来说,隐藏表格边框主要依赖于CSS中的`border-width`和`border-style`属性。通过设置它们的值,我们可以轻松地控制表格边框的显示与隐藏。这种技巧不仅适用于隐藏单一边框,也适用于调整整个表格的外观,是网页...

    设置表格的边框是否被合并为一个单一的边框

    其中,“设置表格的边框是否被合并为一个单一的边框”是一个重要的样式控制手段,它主要涉及到CSS中的`border-collapse`属性。 #### 一、`border-collapse`属性详解 `border-collapse`属性用于控制表格单元格之间...

    bootstrap集成table样式的总结

    Bootstrap是世界上最受...要使用它,首先需要引入必要的JavaScript和CSS文件,然后在表格元素上添加`data-toggle="table"`属性: ```html &lt;table id="myTable" data-toggle="table"&gt; &lt;!-- 表格内容 --&gt; &lt;/table&gt; ...

    CSS样式简单实现Table没有外边框只有内边框

    总结来说,实现"Table没有外边框只有内边框"的效果主要依赖于以下几点CSS技巧: 1. 使用`border-collapse: collapse;`来合并单元格边框。 2. 将表格的边框设置为0,移除外边框。 3. 针对每个单元格设置边框,确保...

    vxe-table vue table 表格组件功能

    整个示例涉及了vxe-table的核心属性和方法,包括如何绑定数据源、配置列属性以及如何使用事件等。 总结来说,vxe-table是一个功能全面、性能优异的Vue表格组件,它将复杂的表格操作和功能简化,使得开发者可以快速...

    HTML表格标记教程(2):表格的边框属性BORDER

    总结一下,`BORDER`属性是HTML表格中用来定义边框宽度的一个重要属性,它允许我们根据需要创建不同宽度的边框,从而增强表格的可读性和视觉效果。尽管在现代Web开发中,CSS是更推荐的样式控制方式,但了解并掌握`...

    边框晚上课123456789

    除了单独设置每个边框属性,还可以使用简写形式一次性设置所有边框属性: ```css div { border: 2px solid red; } ``` 对于表格`&lt;table&gt;`,HTML5提供了`border`属性,但通常建议使用CSS来更好地控制样式。对于...

    bootstrap table的x-editable实现单元格编辑及解决数据为Empty和支持多样式

    总结一下,要实现Bootstrap Table的X-Editable单元格编辑,你需要: 1. 在表格列定义中启用`data-editable`属性。 2. 引入X-Editable的CSS和JS文件,并进行初始化。 3. 处理“数据为空”的情况,可设置默认值或在`...

    常用CSS属性总结.doc

    6. **CSS边框属性(轮廓)**: - `outline`:简写属性,用于设置所有轮廓属性。 - `outline-color`:设置轮廓颜色。 - `outline-style`:设置轮廓样式,如`solid`、`dashed`。 - `outline-width`:设置轮廓宽度...

    table 细线 样式

    通过对“table细线样式”的深入探讨,我们了解到通过合理的CSS属性设置,可以有效地提升表格的视觉效果。无论是通过`border-collapse`合并边框,还是利用单元格背景色差来模拟边框,都可以实现优雅而简洁的细线效果...

    table网页布局网站

    - `border`:设置表格边框的宽度。 - `cellpadding`和`cellspacing`:分别设置单元格内部边距和单元格之间的距离。 - `width`和`height`:设定表格的宽度和高度。 - `align`和`valign`:控制单元格内容的水平...

    设置Word表格的边框线为无、删除Word表格的线条.docx

    设置 Word 表格的边框线为无、删除 Word 表格的线条 在使用 Word 编辑文档时,经常会遇到需要删除表格的边框线条,以便美化文档的外观和提高阅读体验。 deletion of table borders is an essential skill for word ...

    xptable控件及用法

    总结来说,xptable控件为开发人员提供了一个强大的工具,用于创建具有高度定制和交互性的表格界面。通过熟练掌握其用法,你可以提升应用程序的数据展示能力,提供更好的用户体验。记得参考提供的DEMO和源码,这将...

Global site tag (gtag.js) - Google Analytics