表格标签在过去的网页开发中使用的非常多，绝大多数的网站都是用来表格标签来制作，也就是说表格标签是一个时代的代表。
1. 什么是表格标签？
表格标签的作用 ：用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格会清晰的展示出来
表格标签的格式：
<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>
- 其实表格标签中的table 代表整个表格，也就是一堆table 标签就是一个表格，
- 表格标签中的tr标签代表整个表格中的一行数据，也就是说一对 tr 标签就是表格中的一行，td 标签代表表格中一行中的一个单元格。
- 注意点 1.表格标签有一个边框属性 border，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以是看不到边框的。
- 注意点 2.表格标签是一个组合标签，所以table/tr/td 要么一起出现，要么一起不出现，不会单个出现的。
2. 表格标签的属性
- 宽度和高度属性：可以给table 标签和 td 标签使用。该属性默认是按照内容的尺寸来调整的；
- 如果给td标签设置的width和height属性，会修改当前单元格的宽度和高度，不会影响到整个表格的宽度和高度。
- 水平对齐和垂直对齐的属性：其中水平对齐可以给table标签和tr 标签和td标签使用，但是垂直对齐只能给td标签使用。
- 给table标签设置的align 属性，可以控制表格在水平方向的对齐方式;
- 给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式；
- 给td 标签设置的align属性，可以控制当前单元格内容在水平方向的对齐方式。
- 如果给td中设置了align属性，tr中也设置了align 属性，那么单元格中的内容会按照td总设置的来对齐。
- 给tr标签设置valign属性，可以控制当前行中所有单元格中的内容，在垂直方向的对齐方式
- 如果td中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容会按照td中设置的来对齐。
- 外边距和内边距的属性：只能给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. 表格标签其他标签
- 在表格标签中提供了一个标签，用来设置表格的标题，<caption>，只要将标题卸载caption 标签中，那么标题就会自动相对于表格的宽度居中
caption 标签的注意点：caption 标签一定要写在table 标签中，否则无效；
caption 标签一定要紧跟在table标签后面。
- 标题单元格标签
在表格标签中提供了一个标签专门用来存储每一列的标题，这个标签叫做th标签，只要将当前列的标题存储在这个标签中，文字会自动加粗。
3.其实表格中有两种单元格，一种是td，一种是th，td是专门用来存储数据的，th是专门用来存储当列的标题的。
5. 表格的数据分类
- 表格的标题 caption
- 表格的表头信息 thead
- 表格的主体信息 tbody
- 表格的附加信息 tfoot
注意点：如果我们没有编写tbody，系统会我们添加tbody，如果指定了thead和tfoot，那么在修改表格的高度时，thead 和tfoot 都有自己默认的高度，不会随着表格的高度的变化而变化的。
6. 单元格合并
- 水平方向上的单元格合并：可以在td标签上添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待。例如<td conlspan="2"></td>
- 注意点：由于把某一个单元格当做了多个单元格来看，所以会多出一些单元格，所以需要删掉多个单元格才能正常。
- 单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。
- 垂直方向的合并单元格：可以给td标签添加一个rowspan属性，来指定吧某一个单元格当做多个单元格来看待，垂直方向。例如<td rowspan="2">
7.快捷键
- 快速移动 ：control+shif+方向键；
- 快速合并和展开代码（选中的所有的标签）：合并control + shift + - 展开：control +shift + +
- 快速新启一行 ：shift+enter
网友评论