首页 > 编程 > HTML > 正文

HTML表格属性有哪些?HTML表格10种基本属性的总结

2020-03-24 17:15:21
字体:
来源:转载
供稿:网友
HTML表格属性设置在HTML网页中的应用是十分广泛的,也是至关重要的,所以,接下来的这篇文章我给大家分享了总结的HTML表格10种基本属性,下面我们来分别看一看这10种表格属性的介绍以及具体的代码。

1、HTML table属性 table

用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串( )。该属性不会控制边框的样式,而是由CSS来控制

table元素可以有tr,th,td,thead,tbody,tfoot,colgroup元素

table标签的基本属性如下:

border:可以的取值为1和0,1代表有边框,0代表没有边框。

bordercolor:可以设置边框的颜色,值为颜色值。

bgcolor:设置表格的背景颜色

background:设置背景图片

2、html tr属性 tr

用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行

tr元素可以在table,thead,tbody和tfoot元素内使用

tr元素内可以包含一个或者多个td或th元素

它的align,bgcolor等属性已过时,如果要设置属性,请使用CSS设置

3、HTML td属性 td

用来定义表格单元格,可以同colspan,rowspan,headers局部属性使用

(1)colspan: 列跨度,该属性规定了单元格可横跨的列数,该属性的值必须是整数

(2)rowspan:行跨度,该属性规定了单元格可横跨的行数,该属性的值必须是整数

(3)headers:该属性的值是一个或多个单元的ID属性值,将单元格与列标题相关联,可用于使用屏幕阅读器

注意:每个表格必须包含以上三个元素

4、html th属性 th

用来定义标题单元格,使我们有效区分数据及其描述

它同 td 元素具有相同的局部属性,两者有如下区别:

th 是表示头标记,通常位于首行或者首列。而且 th 中的文字默认会被加粗,而 td 是不会的

td 是数据标记,表示单元格的具体的数据

valign属性可以设置th和td,可以取值Top或者Bottom。

callpadding:内容与单元格边框的间距

cellspacing:防止文本超出边框

如果要使单元格实现跨行或者跨列功能,使用属性colspan和rowspan.

5、HTML thead属性 thead

用来定义表格的页眉,表头的包装器。可以定义一行或多行,这些行是 table 元素的列标签

没有thead元素,所有的tr被假定为属于表的主体

6、HTML tbody属性 tbody

用来定义表格的主体

7、HTML tfoot属性 tfoot

用来定义标记表格的页脚

注意:

thead 、 tfoot 标签内部必须拥有 tr 标签

thead 和 tfoot 标签不管放在 table 标签内的哪个位置,都会被分别定为到表格的头部和底部。

tfoot 可以出现在 tbody 或 tr 之前或之后。

在html5之前, tfoot 元素必须出现在 tbody 元素之前,在html5中,可以将 tfoot 元素放在 tbody 或最后一个 tr 元素后面

8、html colgroup属性 colgroup

用来定义表列组,可以使用其来将样式应用于某个列,当然也可以使用下面要说的col元素

具有局部属性 span 的 colgroup 表示列组应该横跨的列数。默认是一列,即对表格的一列设置样式

colgroup 可以包含一个或多个 col 元素

9、HTML col属性 col

用来表示表单个列,建议使用 colgroup 包裹 col 元素而不是 colgroup 直接设置span属性定义组

col 也具有局部属性span

col 放在 colgroup 的元素内部, col 的咩哥实例表示组中的一列。使用该标签可以将样式应用于列的组和该组的单个列

10、html caption属性 caption

用来定义表格的标题,每个表中只能包含一个 caption 元素

11、实例代码:

 body  table border= 1 bordercolor= red bgcolor= #ff4646  caption 表格示例 /caption  tr align= center  th 标题1 /th  th 标题2 /th  th 标题3 /th  /tr  td align= left 左 /td  td align= center 中 /td  td align= right 右 /td  /tr  td valign= top top /td  td center /td  td valign= bottom bottom /td  /tr  /table  /body 

运行结果:

2345截图20180727143134.png

单元格跨行

 table border= 1 bordercolor= #1f1fff  caption 单元格的跨行 /caption  th 姓名 /th  th colspan= 2 电话 /th  /tr  td php  /td  td 123456 654321 /td  /tr  /table 

运行结果:

2345截图20180727143029.png

单元格跨列

 table border= 1  caption 单元格跨列 /caption  th 姓名 /th  th 电话 /th  /tr  td rowspan= 2 php  /td  td 123456 /td  /tr  td 654231 /td  /tr  /table 

运行结果:

2345截图20180727142829.png

相关推荐:

html表格属性_html/css_WEB-ITnose

详解HTML中table表格的frame和rules属性

以上就是HTML表格属性有哪些?HTML表格10种基本属性的总结的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表