前端学习第三天

表格标签

• 格式数据量比较大时，表格这种展现形式最清晰展现数据

• 一对table标签就是一对表格；一对tr标签代表一行数据；一对td标签就是一行单元格中的一个单元格；

• 如何快速写多个标签？

• 如tr*3 然后按下tab键即可；

• 注意：

• 表格标签有一个边框属性，决定了边框的宽度，默认宽度为0；

• 

以下属性尽量不要使用，以后尽量使用css;

表格标签的宽度和高度属性

• 可以给table和td标签使用

表格标签的水平对齐和垂直对齐属性

• 水平对齐可以给table和tr和td标签使用 align属性=left/center
• 垂直对齐给tr和td使用 valign=top/bottom
• 如果td和tr中都设置了align属性，则按照td设置

表格标签内边距和外边距属性

• 只给table标签使用。
• **外边距：**单元格和单元格之间的距离cellspacing ="2";默认是2
• **内边距：**单元格边框和文字之间的距离cellpadding = "20" 默认为1

需求：如何实现细线表格

• 设置背景颜色，在调整外边距；
• 注意通过直接设置外边距不可以！很丑！
  
  

表格标题

• caption标签专门用于表格标题相对表格居中，居左、居右；
• 注意
• ①：写在table标签中否则无效；
• ②：紧跟在table后面，（即tr之前）
  

标题单元格标签

• th标签专门用来存储每一列的标题；
• 那么标题会自动加粗＋居中
  

单元格合并

单元格合并都是向下或者向后合并

• 水平方向
• 给td标签添加一个colspan属性，<td colspan="2"></td> 合并两个；（由于把某一个单元格当成多个看待，就会多出一些单元格，需要注释掉多余的部分）
• 垂直方向
• 给td标签添加一个rowspan属性，<td rowspan="2"></td> 合并两个；（由于把某一个单元格当成多个看待，就会多出一些单元格，需要注释掉多余的部分）