html5之table表格标签的⽤法与总结(标签内联样式和css样式
的对⽐)
<table >
<tr>
<td>姓名</td>
<td>代号</td>
<td>年龄</td>
</tr>
<tr>
<td>麒麟</td>
<td>kirin</td>
<td>28</td>
</tr>
<tr>
<td>麒麟</td>
<td>kirin</td>
<td>28</td>
</tr>
<tr>
<td>麒麟</td>
<td>kirin</td>
<td>28</td>
</tr>
</table>
/
/ ⽤法⼀:完全⽤CSS样式控制table表格!
// ⽤法⼆:table表格标签⾃带有border属性和cellspacing及其他属性,也可以控制表格!
table {css表格样式
width: 300px;
height: 300px;
// 注:必须设置border,border-collapse和border-spacing才会⽣效!
border: 1px solid #ff0000;
// border是设置为整体(collapse)还是设置为单独的(separate)
border-collapse: separate;
// 当border-collapse设置属性为separate时,border-spacing才会⽣效!
// 单独border之间的空隙距离!
border-spacing: 5px;
}
td {
text-align: center;
// 注:必须设置border,border-collapse和border-spacing才会⽣效!
border: 1px solid #ff0000;
// border是设置为整体(collapse)还是设置为单独的(separate)
border-collapse: separate;
// 当border-collapse设置属性为separate时,border-spacing才会⽣效!
// 单独border之间的空隙距离!
border-spacing: 5px;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论