1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html两个th合并单元格 10 HTML表格(table th tr td 合并单元格)的简单认识...

html两个th合并单元格 10 HTML表格(table th tr td 合并单元格)的简单认识...

时间:2020-03-31 21:49:18

相关推荐

html两个th合并单元格 10 HTML表格(table  th tr td 合并单元格)的简单认识...

1、表格的定义

表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列是由 td 标签来定义的。

例如:

代码效果:

这怎么看都不想是表格吧?不急,那是因为HTML表格默认是不显示边框的,所以,我们还要设置表格的边框,如下:(在table标签添加border属性,属性值为边框的宽度,单位是像素)

现在效果如下:

通过上面可以看出:定义一个简单的表格,先用 table 标签确定好代码范围,按照自己想要的效果,确定想要几行几列,比如需要一行两列,就在 table 标签里面定义一个 tr 标签,然后再在 tr 标签里面定义 两个 td 标签就可以了。td 标签的意思 table data ,即表格数据。td 标签中间就是显示的内容。

2、表头单元格th标签

th 标签是与 td 标签同级的,是用来定义表头单元格的,默认是加粗显示的。在上面的代码的基础上增加一个 th 标签 ,如下:

效果如下:

可以看出是默认加粗显示的。

3、调整整体表格大小

前面提到表格是默认不显示表框的,需要设置 table 标签的 border 属性,同样的,我们还可以通过设置 table 标签的 width 以及 height 属性,用来调整表格的整体大小。如下:

效果如下:

这里并不是我将图片放大的,而是表格整体尺寸变大了,是不是又发现了 th 标签的秘密呢?没错,th 标签默认是居中于单元格的。

4、合并单元格

如果要将两个或多个列合并为一个列,将使用colspan属性

如果要合并两行或更多行,则将使用rowspan属性。

这两个属性都是针对单元格的,也就是 td 标签 或 th 标签。

这两个属性的值就是需要合并的单元格的个数。

例子如下:

效果如下:

5、后续学习

1、这些只是一些简单的用法,还有很多的知识,但是对于我而言,这些已经够用了,比如设置表格的背景颜色,边框颜色,这些都是可以的,但是官方已经指出,在HTML5中尽量不要使用。详情请点击。

2、诸如 thead、tbody、tfoot 等标签也是相差不大。不再赘述。

3、后面自己动手,使用表格标签写一个课程表当做练习。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。