HTML CSS中的表格元素和表格布局详解
table元素:在页面中创建一个表格。
td元素:在表中形成一列。
tr元素:在网页内容中创造表格中的一行,只有行的话不会在网页内容中间展示任何的效果,一个表格至少需要行和列同时出现。
th元素:在表格中间创造一列中的表头,专门用来标注这一列的数据类型或是名称。
caption元素,创造表格的名字。按照国际论文的基本格式,表格的名称需要放在表格的下方,所以即便把caption元素发在table元素的第一个子元素,这个元素中的文字也会在表格的最下面显示,可用caption-side样式改变位置。
合并单元格:colspan属性表示该元素占几列,默认值为1,将值设置为2表示合并2个单元格。(横向合并)
rowspan属性表示该元素占几行,默认值为1(纵向合并)
表格的默认尺寸数据计算
1:一列的宽度,由该列最宽的单元格内容决定。
2:一行的高度,由该行最高的单元格内容决定。
表格的固定尺寸数据计算
table元素:width:500px , height:500px。
1:一列的宽度,由该列最宽的内容决定
2:每一列的具体宽度,由总宽度*该列所占宽度的比例计算
1:一行的高度,由该行最高的内容决定
2:每一列的具体宽度,由总宽度*该列所占宽度的比例计算。
行列的高度固定尺寸数据计算
1:宽度放不下,行元素自动撑高
2:行元素撑高,整个table一起撑高
表格的边框样式设计(略做了解即可)
1:border-collapse:边框分隔(collapse(合并),separate(分离)
2:border-spacing:边框间距
边框按照种类的优先级:
hidden>Double>soild>dashed>dotted>ridge>outset>groove>inset