表格

300 阅读3分钟

#表格
作用:给一堆数据添加表格语义,表格是数据的一种展现形式,当数据量很大时,表格被认为是清晰的一种数据表现形式 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不能和其他单元格在垂直方向合并