`

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...

    bootstrap集成table样式的总结

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

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

    总结起来,要使用CSS操作表格实现没有外边框只有内边框的效果,主要涉及以下步骤: 1. 设置`border-collapse: collapse;`以合并单元格边框。 2. 将表格的`border`设为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;`标签来增强表格的语义性和可访问性。...

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

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

    table中的border-collapse属性

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

    Table Table Table

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

    vxe-table vue table 表格组件功能

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

    网页制作之table属性总结

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

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

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

    tableExport 前端数据导出工具

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

    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;...

    前端开源库-tty-table

    总结来说,`tty-table` 是一个强大且易用的前端开源库,为命令行界面提供了优雅的表格解决方案。它的灵活性和易扩展性使其成为开发者处理命令行数据输出的得力助手。在开发 CLI 应用时,利用 `tty-table` 可以极大地...

Global site tag (gtag.js) - Google Analytics