`
QIAN_QIAN
  • 浏览: 137270 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Table边框使用总结

 
阅读更多

从其他微博上看到的,很实用:

 

 

一、表格的常用属性
基本属性有: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
这是不显示任何
分享到:
评论

相关推荐

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

    在使用 Word 编辑文档时,经常会遇到需要删除表格的边框线条,以便美化文档的外观和提高阅读体验。 deletion of table borders is an essential skill for word processing. 在本文中,我们将详细介绍如何设置 Word ...

    bootstrap笔记总结

    * 使用 `class="table-bordered"` 可以创建一个边框表格。 表单 * Bootstrap 提供了多种表单样式,包括水平表单、内联表单等。 * 使用 `class="form-search"` 可以创建一个搜索表单。 * 使用 `class="input-large...

    web开发中的CSS表格.docx

    例如,下面的代码将 table、th 和 td 元素的边框设置为蓝色: ``` table, th, td { border: 1px solid blue; } ``` 如果需要将表格显示为单线条边框,可以使用 border-collapse 属性。 表格宽度和高度 可以使用...

    ie6 表格td中无内容时不显示边框的解决办法

    td中没有内容的时候,默认是不会显示td的边框,此时页面上显示的是一片空白,用户根本不知道这里其实有个的,并且页面也显得凌乱不堪,搜罗了下,总结了下面几种解决方法

    当td为空时怎样显示其边框

    之前总结了下如何用 css 来实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗效果,然后有网友问我为什么他写了一个类似的 css 样式,但只能在 Opera 下正常看到表格的边框效果, IE 下则什么...

    2022年HTML相关知识点表格标签(1).pptx

    例如,可以使用 `&lt;table border="10"&gt;` 设置表格的边框宽度为 10 像素点。 可以使用 `&lt;table bordercolor="#000000"&gt;` 设置表格的边框颜色为黑色。 可以使用 `&lt;table bgcolor="#FFFFFF"&gt;` 设置表格的背景颜色为...

    HTML基础知识点总结.pdf

    HTML 中的表格是由 `&lt;table&gt;` 元素组成的,基本语法为 `&lt;table border="表格的边框的宽度" width="表格的宽度" height="表格的高度" bordercolor="表格边框线的颜色" bgcolor="整个表格的背景颜色" background="表格...

    网页制作:项目-使用表格布局门户网站首页(与“表格”有关文档共30张).pptx

    以下是项目的详细知识点总结: 1. 表格的基本概念:一个完整的表格包括行、列、单元格、单元格间距、单元格边距(填充)、表格边框和单元格边框。理解表格的构成是使用表格布局的基础。 2. 插入表格的方法:可以...

    html5怎么制作个人简历表格?.docx

    例如,我们可以使用以下代码来设置表格的背景色和边框样式: ``` table { background-color: #FFFFFF; border: 1px solid #CCCCCC; } ``` 通过使用 HTML5 和 CSS,我们可以轻松地创建一个漂亮的个人简历表格。

    HTML基础知识总结.pdf

    5. bordercolor —— 用于设置边框颜色,可以用在 `&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`, `&lt;th&gt;`, `&lt;frameset&gt;`等标记中。 6. color —— 用于设置颜色,可以用在 `&lt;font&gt;`, `&lt;hr&gt;`等标记中。 7. height —— 用于设置长度,...

    (完整版)html测试题.pdf

    * 表格的边框可以使用 `&lt;table border=?&gt;` 来设置。 四、图像 * 图像是 HTML 中的一种基本元素,用来插入图像。 * 图像使用 `&lt;img&gt;` 元素定义,src 属性指定图像的路径。 * 图像的边框可以使用 `&lt;img border=?&gt;` ...

    2023年HTML基础知识点总结.doc

    * `&lt;table&gt;`:表格标签 + `border`:表格边框宽度 + `width`:表格宽度 + `height`:表格高度 + `bordercolor`:表格边框线的颜色 + `bgcolor`:整个表格的背景颜色 + `background`:表格的背景图片地址 + `...

    网页设计HTML表格基础与布局PPT学习教案.pptx

    在HTML表格基础中,我们需要了解表格的基本结构和属性,如边框、尺寸、颜色、合并、对齐等。这些属性可以通过使用相应的HTML标签和属性值来实现。 HTML表格布局 HTML表格布局是指使用表格来布局网页的结构和内容...

    css常用代码大全.pdf

    本资源摘要信息将对CSS常用代码大全进行详细的解释和总结,涵盖了字体属性、背景属性、区块属性、对齐属性、词间距、显示属性、方框属性、边框属性、列表属性、定位属性等多个方面。 字体属性 字体属性用于控制...

    实验三-HTML表格与HTML表单.doc

    知识点总结: 1. HTML 表格的基本结构和应用 2. HTML 表格的样式控制,例如边框、背景颜色、字体颜色等 3. HTML 表单的基本结构和应用 4. HTML 表单的两种提交方法:GET 和 POST 方法 5. HTML 表格和 HTML 表单的...

    实训四-HTML基础知识之表格化网页.pdf

    表格化网页的制作需要使用HTML的表格标记&lt;table&gt;,包括表格的基本结构、表格的边框、背景颜色和背景图片等。 十、 表格标记&lt;table&gt;的属性 表格标记&lt;table&gt;的属性包括width、height、border、bordercolor、bgcolor...

    李炎恢HTML_CSS教程.pdf

    下面是对该教程的知识点总结: HTML基础 * HTML5概述:HTML5的历史、功能、特点 * HTML基本格式:HTML文档结构、标签元素、实体符号 * 文本元素:标题、段落、换行、强调、引用 * 超链接和路径:超链接、邮件链接...

    HTML测试题含答案.pdf

    可以使用 &lt;table&gt; 标记创建表格,border 属性可以设置表格边框宽度,&lt;td&gt; 标记可以设置单元格内容,colspan 属性可以设置单元格跨列数。 9. HTML 框架: 可以使用 &lt;frameset&gt; 标记创建框架页面,frameset 属性可以...

    CSS3网页知识.doc

    HTML5基础CSS3基础 Table 属性 cellspacing 格子之间的距离 Cellpadding 格子和内容之间的距离 Align 左右位置 left center right Valign 上下位置 Border 边框值 无单位 Bgcolor 背景色 Tr 行 Td 列

Global site tag (gtag.js) - Google Analytics