HTML表格标签

表格标签在过去的网页开发中使用的非常多，绝大多数的网站都是用来表格标签来制作，也就是说表格标签是一个时代的代表。

1. 什么是表格标签？

表格标签的作用 ：用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格会清晰的展示出来
表格标签的格式：

    

          
需要显示的内容
   

• 其实表格标签中的table 代表整个表格，也就是一堆table 标签就是一个表格，
• 表格标签中的tr标签代表整个表格中的一行数据，也就是说一对 tr 标签就是表格中的一行，td 标签代表表格中一行中的一个单元格。
• 注意点 1.表格标签有一个边框属性 border，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以是看不到边框的。
• 注意点 2.表格标签是一个组合标签，所以table/tr/td 要么一起出现，要么一起不出现，不会单个出现的。

2. 表格标签的属性

1. 宽度和高度属性：可以给table 标签和 td 标签使用。该属性默认是按照内容的尺寸来调整的；

• 如果给td标签设置的width和height属性，会修改当前单元格的宽度和高度，不会影响到整个表格的宽度和高度。

2. 水平对齐和垂直对齐的属性：其中水平对齐可以给table标签和tr 标签和td标签使用，但是垂直对齐只能给td标签使用。

• 给table标签设置的align 属性，可以控制表格在水平方向的对齐方式;
• 给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式；
• 给td 标签设置的align属性，可以控制当前单元格内容在水平方向的对齐方式。
• 如果给td中设置了align属性，tr中也设置了align 属性，那么单元格中的内容会按照td总设置的来对齐。
• 给tr标签设置valign属性，可以控制当前行中所有单元格中的内容，在垂直方向的对齐方式
• 如果td中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容会按照td中设置的来对齐。

3. 外边距和内边距的属性：只能给table 标签使用。

• 外边距就是单元格和单元格之间的距离,默认，外边距为2px；cellspacing
• 内边距 就是单元格的边框和文字之间的间隙；cellpadding；默认内边距为 1px。

3.细线表格

1.制作方式：

1.1 给table标签设置bgcolor；
1.2 给tr标签设置bgcolor；
1.3 给table 标签设置cellspacing=“1px”
注意点：table标签和tr标签以及td标签，都支持bgcolor 属性。

4. 表格标签其他标签

1. 在表格标签中提供了一个标签，用来设置表格的标题，，只要将标题卸载caption 标签中，那么标题就会自动相对于表格的宽度居中

caption 标签的注意点：caption 标签一定要写在table 标签中，否则无效；
caption 标签一定要紧跟在table标签后面。

2. 标题单元格标签

在表格标签中提供了一个标签专门用来存储每一列的标题，这个标签叫做th标签，只要将当前列的标题存储在这个标签中，文字会自动加粗。

3.其实表格中有两种单元格，一种是td，一种是th，td是专门用来存储数据的，th是专门用来存储当列的标题的。

5. 表格的数据分类

1. 表格的标题 caption
2. 表格的表头信息 thead
3. 表格的主体信息 tbody
4. 表格的附加信息 tfoot
   注意点：如果我们没有编写tbody，系统会我们添加tbody，如果指定了thead和tfoot，那么在修改表格的高度时，thead 和tfoot 都有自己默认的高度，不会随着表格的高度的变化而变化的。

6. 单元格合并

1. 水平方向上的单元格合并：可以在td标签上添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待。例如
2. 注意点：由于把某一个单元格当做了多个单元格来看，所以会多出一些单元格，所以需要删掉多个单元格才能正常。
3. 单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。
4. 垂直方向的合并单元格：可以给td标签添加一个rowspan属性，来指定吧某一个单元格当做多个单元格来看待，垂直方向。例如

7.快捷键

1. 快速移动 ：control+shif+方向键；
2. 快速合并和展开代码（选中的所有的标签）：合并control + shift + - 展开：control +shift + +
3. 快速新启一行 ：shift+enter