#表格
作用:给一堆数据添加表格语义,表格是数据的一种展现形式,当数据量很大时,表格被认为是清晰的一种数据表现形式
table 一个table标签就代表一个表格
tr 一个tr标签就代表一行
td 一个td标签就代表行里的一个标准单元格
table tr td 一套组合标签,不可单独使用
表格的属性
1,table标签的有一个border属性,是用来给表格设置边框的粗细,border的默认值为0,所以边框没有展现出来
2;宽度属性,宽度属性可以给table,td标签设置
width height 表格没有设置宽高属性时是靠内容撑开的,但是手动设置宽高值。再给td设置宽高值时不会影响整个表格的宽高
3;水平对齐和垂直对齐
平align 可以给table tr td标签设置 align:left|center|right,
table设置aligh时:时刻控制表格在页面中水平方向的对齐方式
tr设置align属性时:是控制一行所用单元格内容的水平对齐方式
td设置align属性时:是控制当前单元格内容在水平方向的对齐方式
tr和hd设置align说行作用在了同一个单元格上时,采用的是td设置align属性值
##垂直valign 可以给tr td标签 valign:top|center|right
tr设置valign属性时:是控制一行所有单元的内容的垂直方向的对齐方式
td设置valign属性时:是控制当前单元格的内容垂直方向的对齐方式
tr和td设置的valign属性作用在同一个单元格上时,采用的是td设置valign属性值
内外边距属性 cell单元格padding内边距 spabe间距只能在table标签设置
外边距:cellspacing是指两个单元格之间的距离,默认值时2px
内边距:cellpadding是指单元格的边框和内容之间的距离默认值是1px
表格其他标签
caption表格的标题 始终相对于表格居中 caption标签必须要写在table标签内紧跟着table标签
th是表格中每一列标题,字体是默认加粗居中的
表格的结构
由于表格的数据比较复杂,为了加强语义和表格的管理,我们把表格中的数据分为4类
caption表格的标题
thead表格的头部信息
tbody表格的主体信息
tfoot表格的页尾信息 表格的附加信息
thead和tfoot有默认高度,不会随着表格的高度变化 通过css修改
单元格一共有两种:td标准单元格,用来存储数据的
th标题单元格,用来设置每一列的标题
单元格合并
1:水平方向单元格合并
colspan:column列 span跨度
colspan='2'在水平方向看作是两个单元格,同一行就会多出一个单元格
,将多余的那个单元格删除
2垂直方向单元格合并
rowspan row行span 跨度
rowspan=’2‘在垂直方向看作是两个单元格,同一行就会多出一个单元格,将多余的单元格删除
合并单元格总是向后向下合并,thead和tfoot不能和其他单元格在垂直方向合并