表格标签

Posted 2021-01-11 zengsf

 

1.语法：

　　1.标签介绍：
　　　　表格标签：<table></table>
　　　　行标签：<tr></tr> ->table row
　　　　单元格标签：<td></td> ->table data
　　2.创建顺序：
　　　　1.创建表格标签
　　　　2.在表格标签中创建行标签，每一行就是一个tr
　　　　3.在行中创建单元格存放数据，每一个单元格对应一个td

2.标签属性

　　1. table 属性
　　　　1. border ：设置边框，取值以px为单位的数值（px可以省略）
　　　　2. width ：设置宽度
　　　　3. height ：设置高度
　　　　4. align ：设置表格在其父元素中的水平对齐方式
　　　　5. cellpadding : 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
　　　　6. cellspacing : 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
　　　　7. bgcolor : 设置表格的背景颜色，取值可以是英文的颜色名称
　　2. tr 标签属性
　　　　1. bgcolor : 设置当前行的背景颜色
　　　　2. align ：设置当前行中内容的水平对齐方式
　　　　　　取值 ： left / center / right
　　　　3. valign :设置当前行内容的垂直对齐方式
　　　　　　取值 ：top / middle / bottom,默认垂直居中
　　3. td 标签属性
　　　　1. width 设置单元格的宽度
　　　　2. height 设置单元格的高度
　　　　3. align 单元格内容的水平对齐方式
　　　　4. valign 单元格内容的垂直对齐方式
　　　　5. bgcolor 单元格的背景颜

3.单元格合并

　　是单元格独有的属性 colspan rowspan
　　1. 单元格的跨列合并
　　　　从当前单元格的位置开始，横向向右合并几个单元格
　　　　colspan = "3" ->跨3列进行合并(包含自身)
　　2. 单元格的跨行合并
　　　　从当前的单元格开始，纵向向下合并单元格
　　　　rowspan = "3" ->向下跨3行合并单元格
　　注意 ：一旦发生单元格合并，
　　　　跨列合并，要删除当前行中多余的单元格
　　　　跨行合并，要删除其后行中多余的单元格
　　　　始终保持表格结构完整