`

Table边框使用总结

    博客分类:
  • html
阅读更多

本文转载自:http://www.cnblogs.com/Nina-piaoye/archive/2009/05/13/1455791.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>

 

我在添加点:

frame和rules属性:这两个属性比较特殊,是用于定义表格边框显示方式的。
frame:该属性定义表格最外层表格线的显示方式,有以下可选值:
void:不显示表格外层的边框线。
box:显示四周的边框线
border:和box相同
above:只显示顶部的边框线
below:只显示底部的边框线
lhs:只显示左侧的边框线
rhs:只显示右侧的边框线
hsides:只显示顶部和底部的边框线
vsides:只显示左侧和右侧的边框线

 

rules:该属性定义单元格边框显示方式,有以下可选值:none:不显示单元格边框
all:显示所有单元格边框线
cols:只显示纵向边框线,及单元格左右侧的边框线。
rows:只显示横向边框线,即单元格上下两侧的边框线。rows和cols在实际中有时是很有用的。
groups:分组显示,只显示thead/tbody/tfoot的边框线。


看一下对比效果吧:

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
分享到:
评论

相关推荐

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

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

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

    本篇将详细解释如何使用CSS来设定网页table的边框样式。 首先,边框宽度是CSS中设置边框样式的首要因素。CSS提供了四个单独的属性来控制每个边框的宽度:`border-top-width`、`border-right-width`、`border-bottom...

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

    总结起来,要使用CSS操作表格实现没有外边框只有内边框的效果,主要涉及以下步骤: 1. 设置`border-collapse: collapse;`以合并单元格边框。 2. 将表格的`border`设为0,移除外边框。 3. 为单元格定义内边框,通常...

    bootstrap集成table样式的总结

    本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式,包括水平对齐的单元格、行高亮以及可选的striped(斑马纹)和bordered(带边框)样式。通过添加`...

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

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

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

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

    HTML表格边框设置方法

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

    table标签使用方法

    通过本文的学习,你应该能够熟练掌握`table`标签的基本用法以及如何使用`colspan`和`rowspan`属性来合并单元格,同时也了解了如何使用`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`标签来增强表格的语义性和可访问性。...

    Table Table Table

    例如,使用`border-collapse`可以控制表格边框合并,`text-align`调整文本对齐,而`cellspacing`和`cellpadding`则用于设定单元格之间的间距。 3. **数据库中的表格**: 在关系型数据库中,如MySQL、SQL Server或...

    table中的border-collapse属性

    在网页设计中,特别是在使用`table`元素进行布局时,`border-collapse`属性的使用极为关键。例如,在默认情况下,即未明确指定`border-collapse`属性时,浏览器会将其视为`separate`,这可能导致表格看起来较为臃肿...

    vxe-table vue table 表格组件功能

    在基础功能方面,vxe-table可以实现常规的表格显示需求,如表格尺寸的自定义、斑马线样式、带有边框的展示以及单元格样式的调整等。通过这些基础设置,开发者可以根据实际需求定制表格的外观,以达到更好的视觉效果...

    xptable控件及用法

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

    网页制作之table属性总结

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

    tableExport 前端数据导出工具

    总结来说,TableExport是一款强大的前端数据导出工具,它提供了丰富的功能和自定义选项,使得网页中的数据能够方便地导出为多种常见格式。无论是小型项目还是大型应用,TableExport都能成为提高用户体验的有效工具。

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

    我们可以使用如下CSS来控制其边框样式: ```css table { border-collapse: collapse; /* 或者使用 separate */ } td { border: solid 2px #f00; /* 设置单元格的边框宽度、样式和颜色 */ background-color: #...

    html,table常用样式

    这里展示了如何使用CSS来实现这一点: ```css /* 定义表格的基本样式 */ table.imagetable { font-family: verdana, arial, sans-serif; /* 字体 */ font-size: 11px; /* 字号 */ color: #333333; /* 文字颜色 *...

    xptable,功能齐全的表单控件

    1. **自定义样式**:XPTable允许开发者通过CSS样式来定制表格的外观,包括单元格背景色、字体、边框等,从而实现个性化的设计。 2. **交互性**:控件支持行选择、单元格编辑、右键菜单等功能,增强了用户的交互体验...

    table网页布局网站

    总结,Table布局在网页设计中扮演了重要角色,尤其适合数据展示。然而,随着技术的发展,CSS布局方案如Flexbox和Grid已经成为首选,它们提供了更多的灵活性和控制力。学习和理解这些布局方法,将有助于你构建出更...

    隐藏 表格 边框 的设置

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

    table只显示横行、枞行

    根据给定的代码示例,我们可以总结出以下几种实现方式: ##### 1. 只显示横行 ```html &lt;table rules="rows" frame="hsides" bordercolor="black"&gt; &lt;tr&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;...

Global site tag (gtag.js) - Google Analytics