表格

表格：
表格的组成：由行 和 列组成，行和列交汇的叫做单元格
行--tr
单元格标签---td
结构：
table > tr > td

　　

caption表格的标题它是居中的
表格相关（行内）属性：
width---表格的宽度
height---表格的高度
border---表格的边框
bordercolor--表格的边宽颜色
cellspacing="数字"--设置单元格之间的距离
cellpadding="数字"---设置内容到单元格边框的距离
align="left|center|right"---如果align属性给table添加，那么是将表格设置在网页中的对齐方式
想要文字在单元格中居中显示，只能将align属性给tr或者 td设置
valign垂直的 top|middle|bottom
注意点：当单元格没有内容的时候，单元格默认情况下会被挤压，想要所有单元格宽高一样，
只能单独给单元格设置宽高

合并的属性都给td添加
行合并--rowspan="n"，删除本行下面n-1行对应的td
列合并---colspan="n" 删除本行里面的n-1个td

CSS属性设置：
边框合并：boder-collapse属性值：separate;（分开，默认）|collapse;（合并）

table,td,th{
border:1px solid #aaa; 
font-size: 23px; 
border-collapse:collapse;
}

边框间距border-spacing(前提是：border-collapse:separate;)

table,td,th{
border:1px solid #aaa; 
font-size: 23px; 
border-collapse:separate; 
border-spacing: 45px;
}

 

设置表格标题的位置caption-side属性值：top;//默认|bottom;|left;|right;

table,td,th{
border:1px solid #aaa; 
font-size: 23px; 
border-collapse:separate; 
border-spacing: 45px; 
caption-side:bottom;
}

当单元格对象宽度超过单元格所定义的宽度时，可用table-layout：fixed保持表格宽度不被改变，属性值：auto(默认)fixed(宽度固定)

table,td,th{
border:1px solid #aaa;
font-size: 23px; 
border-collapse:separate; 
border-spacing: 5px; 
table-layout: fixed; 
caption-side:top;
}

 

转载于:https://www.cnblogs.com/muyun123/p/11615080.html