1、表格的定义
表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列是由 td 标签来定义的。
例如:
1-1 | 1-2 |
2-1 | 2-2 |
代码效果:
这怎么看都不想是表格吧?不急,那是因为HTML表格默认是不显示边框的,所以,我们还要设置表格的边框,如下:(在table标签添加border属性,属性值为边框的宽度,单位是像素)
1-1 | 1-2 |
2-1 | 2-2 |
现在效果如下:
通过上面可以看出:定义一个简单的表格,先用 table 标签确定好代码范围,按照自己想要的效果,确定想要几行几列,比如需要一行两列,就在 table 标签里面定义一个 tr 标签,然后再在 tr 标签里面定义 两个 td 标签就可以了。td 标签的意思 table data ,即表格数据。td 标签中间就是显示的内容。
2、表头单元格th标签
th 标签是与 td 标签同级的,是用来定义表头单元格的,默认是加粗显示的。在上面的代码的基础上增加一个 th 标签 ,如下:
aaa | bbb |
---|---|
1-1 | 1-2 |
2-1 | 2-2 |
效果如下:
可以看出是默认加粗显示的。
3、调整整体表格大小
前面提到表格是默认不显示表框的,需要设置 table 标签的 border 属性,同样的,我们还可以通过设置 table 标签的 width 以及 height 属性,用来调整表格的整体大小。如下:
aaa | bbb |
---|---|
1-1 | 1-2 |
2-1 | 2-2 |
效果如下:
这里并不是我将图片放大的,而是表格整体尺寸变大了,是不是又发现了 th 标签的秘密呢?没错,th 标签默认是居中于单元格的。
4、合并单元格
如果要将两个或多个列合并为一个列,将使用colspan属性
如果要合并两行或更多行,则将使用rowspan属性。
这两个属性都是针对单元格的,也就是 td 标签 或 th 标签。
这两个属性的值就是需要合并的单元格的个数。
例子如下:
aaa | bbb |
---|---|
1-2 | |
2-1 |
效果如下:
5、后续学习
1、这些只是一些简单的用法,还有很多的知识,但是对于我而言,这些已经够用了,比如设置表格的背景颜色,边框颜色,这些都是可以的,但是官方已经指出,在HTML5中尽量不要使用。详情请点击。
2、诸如 thead、tbody、tfoot 等标签也是相差不大。不再赘述。
3、后面自己动手,使用表格标签写一个课程表当做练习。