表格
表格:
表格的组成:由行 和 列组成,行和列交汇的叫做单元格
行--tr
单元格标签---td
结构:
table > tr > td
<table> <tr> <th></th> </tr> <tr> <td><td> </tr> </table>
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;
}