【转】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
<think>我们正在讨论HTML中如何为<table>标签设置边框。根据引用[2]中的示例,我们看到在<table>标签中使用了border属性,例如:<table border="1">。同时,引用[1]中提到可以使用style属性设置CSS样式。因此,设置边框有两种主要方法: 1. 使用border属性:这是HTML的传统方法,直接设置border属性为一个字,表示边框的宽度(以像素为单位)。 2. 使用CSS样式:通过style属性设置边框样式,这样可以更灵活地控制边框的颜色、样式和宽度。 具体方法如下: - 方法1(传统HTML属性): 在<table>标签中添加border属性,并指定边框宽度,例如: <table border="1"> 这种方法设置边框是默认的立体边框,颜色和样式由浏览器决定。 - 方法2(CSS内联样式): 使用style属性设置边框,可以分别设置边框的宽度、样式和颜色,例如: <table style="border: 1px solid black;"> 这里,边框宽度为1像素,实线,黑色。也可以分别设置各个边的边框。 另外,需要注意的是,使用<table>标签时,默认情况下,每个单元格(<td>)也有独立的边框。如果要设置整个表格边框,通常需要同时设置表格和单元格的边框样式。 在引用[2]的示例中,不仅给表格设置了border属性,而且在内部表格中也设置了border属性,并且使用了嵌套表格来布局(虽然表格布局现在已被淘汰,但作为示例展示了边框设置)。 此外,我们还可以使用CSS来设置表格边框合并(border-collapse)属性,以控制单元格边框是否合并为一个单一的边框。例如: <table style="border-collapse: collapse; border: 1px solid black;"> 这样设置后,表格边框和单元格的边框会合并,看起来更整洁。 总结,为<table>设置边框的常用方法是: 1. 使用border属性(简单但样式有限)。 2. 使用CSS的border属性(更灵活,推荐使用)。 根据用户的问题,他/她想要查找在HTML中为<table>标签设置边框的方法,因此我们给出两种方法,并推荐使用CSS方法,因为更符合现代网页设计标准。 </think>在HTML中为`<table>`标签设置边框主要有以下两种方法,这些方法均基于引用内容[^1][^2]: ### 1. **传统HTML边框属性(简单但灵活性低)** 在`<table>`标签中直接使用`border`属性,值为像素宽度: ```html <table border="1"> <!-- 设置1像素边框 --> <tr> <td>单元格</td> </tr> </table> ``` - ✅ 优点:语法简单,兼容旧浏览器 ❌ 缺点:样式单一(默认灰色立体边框),无法自定义颜色/样式 ### 2. **CSS样式设置(推荐,灵活度高)** 通过`style`属性添加CSS边框规则(引用[^1]中提到的内联样式): ```html <table style="border: 2px solid red; border-collapse: collapse;"> <tr> <td style="border: 1px dotted blue">单元格</td> </tr> </table> ``` - **关键属性**: - `border: [宽度] [样式] [颜色]` 例:`2px solid red` → 2像素红色实线 - `border-collapse: collapse`(合并相邻边框,避免双线效果) - ✅ 优点: - 可自定义颜色/样式(虚线`dashed`、点线`dotted`等) - 可单独控制表格外框与单元格边框(如示例中表格用红色实线,单元格用蓝色虚线) > ⚠️ **注意**: > - 若需为单元格单独设置边框,必须在`<td>`或`<th>`标签中添加样式(如引用[^2]的嵌套表示例)。 > - `align`等传统属性已被HTML5淘汰(引用[^1]),建议优先使用CSS。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值