7.表格标签

表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个

目录

1  基本用法

2  表格属性

3  表格结构标签

4  合并单元格

4.1  跨行合并(竖着) rowspan

4.2  跨列合并(横着) colspan

5  合并相邻的边框 border-collapse: collapse;

---

1  基本用法

table是整个的大表格，tr是一行，td是一行中的一个

我们先简单写个例子

• td可以创建后不写内容，再创建时会把前面的格子空过去

这个就是我们一个简单的表格

现在我们说th标签，th标签是表头的意思，我们用一下

• 每一行都可以多给或少给格子，无所谓

它展示出来是这样的，会给文字加粗并居中

2  表格属性

一般都在css中设置，我们这里也提一下

• cellpadding是单元格内容与边框的距离，cellspacing是单元格之间的距离
• 还有一个height属性，是单元格的总高度，width是单元格的总宽度
• border也可以给1以上的值，这个值是边框的宽度

这些是表格的属性，css中跟这个里面也差不多，我们给这五个用一下

• height虽然是黄色的但是可以正常使用

现在这个表格就变成这个样子了

单元格里也可以放链接与图片

3  表格结构标签

表格结构标签是thead和tbody，thead表示表格头部区域，tbody表示表格主体区域，我们一般这样用

在显示上与没加没有任何不同

4  合并单元格

4.1  跨行合并(竖着) rowspan

跨行合并把代码写在要合并的最上方的单元格中

我们现在2合并这两个格

我们这样写

合并成功

4.2  跨列合并(横着) colspan

跨行合并把代码写在要合并的最左侧的单元格中

我们合并这三个格

我们这样写

合并成功

5  合并相邻的边框 border-collapse: collapse;

没合并之前是这样的

合并之后是这样的