Fork me on GitHub

表格

表格:
表格的组成:由行 和 列组成,行和列交汇的叫做单元格
行--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;
}

 

posted @ 2019-10-01 11:52  幽幽木云  阅读(205)  评论(0编辑  收藏  举报