转：html 里面table的属性

最新推荐文章于 2021-06-15 22:49:49 发布
最新推荐文章于 2021-06-15 22:49:49 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： css 文章标签： table html border

       由于这两天看drupal遇到一些界面的问题，顺便看了一些html，table的一些属性。

 

 下面是转自新浪博客一位网友的总结。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<table>的属性：
1.border=表格边框，
2.width,height表格的宽、高
3.cellspacing单元格之间的距离。
4.cellpadding表格内部与文本的距离。
5.algin表格相对网页的位置
6.<caption>..</caption>表格标题的位置。
    algin=left/right左/右
    valgin=top/bottom上/下
7.brodercolor表格边框颜色。
8.borercolorlight表格亮面颜色(左、上)bordercolordark表格暗面颜色（右、下）
表格的这些属性都很简单，只要使用一下就都明白了。
<tr>的属性
bgcolor一行的背景颜色。
algin/valgin行的水平对齐方式和垂直对齐方式。
<td>的属性
bgcolor一列的背景颜色。
rowspan/colspan单元格所占行数/单元格所占列数
algin/valgin和<tr>中的是一样的。
 
下面是几个特出的属性，很多精彩的表格都是利用这些属性完成的。
1.ruels单元格之间的特效。
表格中分隔线(Rules)的显示 html学习心得三

显示所有分隔线 <table rules=all>

<table border rules=all> <colgroup><col align=center span=2> <colgroup align=right> <thead> <tr><th>Food</th><th>Drink</th><th>Sweet</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> <tbody> <tr><td rowspan=3 align=right>Total $-00.0</td> </tbody> </table>
FoodDrinkSweet
ABC
DEF
Total $-00.0

只显示组(Groups)与组之间的分隔线 <table rules=groups>

FoodDrinkSweet
ABC
DEF
Total $-00.0

只显示行与行之间的分隔线 <table rules=rows>

FoodDrinkSweet
ABC
DEF
Total $-00.0

只显示列与列之间的分隔线 <table rules=cols>

FoodDrinkSweet
ABC
DEF
Total $-00.0

不显示任何分隔线 <table rules=none>

FoodDrinkSweet
ABC
DEF
Total $-00.0
2.frame属性，设置表格外边框特效
表格中边框的显示 html学习心得三

显示所有 4 个边框 <table frame=box>

<table border frame=box> <thead> <tr><th>Food</th><th>Drink</th><th>Sweet</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table>
FoodDrinkSweet
ABC
DEF

只显示上边框 <table frame=above>

FoodDrinkSweet
ABC
DEF

只显示下边框 <table frame=below>

FoodDrinkSweet
ABC
DEF

只显示上、下边框 <table frame=hsides>

FoodDrinkSweet
ABC
DEF

只显示左、右边框 <table frame=vsides>

FoodDrinkSweet
ABC
DEF

只显示左边框 <table frame=lhs>

FoodDrinkSweet
ABC
DEF

只显示右边框 <table frame=rhs>

FoodDrinkSweet
ABC
DEF

不显示任何边框 <table frame=void>

FoodDrinkSweet
ABC
DEF
3.fiedset特殊表格。
<html>
<head>
<body>
<table width="200">
<tr>
<td><fieldset style="width:200" align="center"> <legend>
<table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20">
<tr>
<td><font color=blue>无忧IT网</font></td>
</tr>
</table>
</legend><br>
</fieldset>
</td>
</tr>
</table>
</body>
可以运行下这个代码就知道是怎么个特殊了。
4.legnd在fieldset标签创建特殊表格生成头信息。
<table width="200"" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center">
<legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend>
<br>
</fieldset>
</td>
</tr>
</table>
运行下例子就知道效果了，表格的东西真多。麻烦
linshijielinshijie
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个属性border-collapse解决Table的边框问题
09-25
表格的边框算是页面制作中最头痛的，带边线的表格在之前非常讨厌做，不过今天终于解决了这个问题，下面将示例与大家分享下
valign 简单使用
shao_junne博客
08-20 1995
实用小技巧设置表格对齐align属性对应的替代cssvalign属性 关于获取内容的jQuery语句： $("span").attr("value"); //获取span的value属性值 设置表格对齐 align属性 规定表格相对于周围元素的水平对齐方式. <tr align="left"> <th align="center"> <td align="right"> 对应的替代css <tr style="floa
区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性
weixin_34209406的博客
09-17 154
区别display：box；display：inline；display：none三者的不同 display:block的特点是： block是Display默认的值。总是在新行上开始；该对象随后的内容自动换行;行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度；<div>, <p>, <h1>, <form>, <u...
html中圆形单元格,HTML代码中关于table的边框控制以及单元格艰巨
weixin_32420193的博客
06-15 194
HTML代码中关于table的边框控制以及单元格艰巨(2011-06-22 14:37:36)标签：南国鹿灵子鹿胎膏杂谈1.若有一个1行1列的表格,设放table属性,使患上他的右、上两条边框预示,剩下两条暗藏,怎样设放2.正在当表格的单元格里,有一张图片拔入来正在内,http://301.309sc.com/南国,设放双元格属性,使患上彼图片间隔上面框线5px,离右面框线3px细致:必需施用ta...
HTML中的frame属性
weixin_43311121的博客
01-29 1541
HTML-03 frame的使用 1、frame=“box” <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr&...
深入了解表格的属性
weixin_30295091的博客
04-18 287
表格是网页制作时最常使用的元素了，可以说，大部分的网页都是由表格支撑的，没有表格的网页绝对是不完美的，也不可能做的非常漂亮。但是长期以来，表格的使用可以说都没有发挥它的最大作用，这是因为大家对表格的属性了解还不够透彻。看完下面的介绍，原来一直困扰你的问题也许一下子就非常简单地解决了，最起码可以使你制作时更加方便...... 一、表格的常用属性基本属性有：width（宽度）、height（高度）、b...
San_Sec:里面的东西
05-26
2. **标签**：HTML由一系列的标签组成，如`<h1>`到`<h6>`定义标题，`<p>`表示段落，`<a>`创建链接，`<img>`插入图像，`<div>`用于分组内容，`<table>`构建表格等。每个标签都有其特定的用途和语义。 3. **属性**：...
table里面获取所有元素
03-19
这篇博客“table里面获取所有元素”可能探讨了如何在JavaScript或相关的前端技术中实现这一功能。 首先，我们需要理解HTML中的表格结构。一个基本的表格由`<table>`元素作为容器，`<tr>`（行）元素来定义每一行，`...
table嵌套table边框样式
02-21
在CSS中，我们可以用以下属性来调整表格的边框： 1. `border`: 设置元素的边框宽度、样式和颜色。 2. `border-collapse`: 控制表格的边框合并。默认值为`separate`，表示边框分开；设为`collapse`时，相邻边框会...
layui table单元格事件修改值的方法
10-16
首先，layui 的 table 组件允许我们自定义列的属性，包括事件。例如，在描述中提到的 `event` 属性可以用来绑定特定的点击事件。例如，`event: 'setSign'` 就是为 `sex` 列定义了一个名为 `setSign` 的点击事件。 ...
Table 的 rules规则
编程开发资料库
07-13 585
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &l
<table> 标签的 rules 属性
xyjikl
06-29 3398
rules 属性规定内侧边框的哪个部分是可见的。 从实用角度出发，最好不要规定 rules，而是使用 CSS 来添加边框样式。 值 描述 none 没有线条。 groups 位于行组和列组之间的线条。 rows 显示位于行之间的线条。 cols 显示位于列之间的线条。 all
理解表格一：图解 frame 和 rules 属性
rose001的专栏
02-11 1550
Web 标准化也不是要“横扫一切牛鬼蛇神”，其要义是以语义化的原则使用标记，回归 HTML/XHTML 作为结构化语言的本来面目。虽然不再提倡用 table 元素来进行页面布局，但用它来组织表格化的数据仍然还是最合适的选择。由于 table 元素的天生特性，使得用它来显示格式化的数据非常便利。但我们大多数人对于 table 元素的认识大概还只停留在 bgcolor、cellspacing、ce
html教程(七) 表格进阶
rmzhang33的专栏
09-14 853
表格的色彩表元的背景色彩和背景图象 #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua Food Drink Sweet
align和valign属性
热门推荐
qq_zxt的博客
04-16 1万+
align和valign属性的区别： 1.align属性趋向于左右对齐(水平对齐)，其值包含：left、right、center 2.valign属性趋向于垂直对齐，其值包含：top（对内容进行上对齐）、bottom（对内容进行下对齐）、middle（对内容进行居中对齐）、baseline（与基线对齐） table 学生考试成绩单 姓名 语文 数学
Html align="center"与valign="middle"的区别
每天进步一点点 时间会让你成为巨人
08-23 1万+
align:控制内容的(左右)横向位置, align="left"左边对齐, align="center"中间, align="right"右边对齐, valign:控制的是内容的垂向(上下)位置, valign="top"上面, valign="middle"中间, valign="bottom"下面,
align与valign区别
nicknailo博客
01-16 2572
align 表示水平方向上的显示，有left\right\center valign表示垂直上的显示，有middle/bottom/top
【web前端】table的border属性解析（内联样式表和内部样式表中的区别）
Cassie_zkq的博客
11-18 5239
今天做实验的时候被table的border属性搞的眩晕(´･Д･)」特此总结一下。 （我不去学前端框架那些高级知识在纠结这些大作业用不到的基础东西干啥。。） 一、内部样式表中内table的border属性测试 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
HTML教程--表格进阶
weixin_30882895的博客
10-08 74
表格的色彩 表元的背景色彩和背景图象 <th bgcolor=#> <th background="URL"> #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Si...
html更改table里面的字体颜色
最新发布
05-30
```html <!-- 在标签中添加以下样式表 --> /* 更改表格中所有文本的颜色为红色 */ table { color: red; } /* 更改表格中表头文本的颜色为蓝色 */ th { color: blue; } /* 更改表格中单元格文本的颜色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值