table添加正确的样式

以前在做表格的时候,会在表格<table>标签中添加一些属性,来改变表格的样式,经常用到的有这几个

width 表格的宽度
border 表格边框的宽度
cellpadding  单元边沿与其内容之间的空白
cellspacing  单元格之间的空白

1、其中如果只设置了border="1"是这样的  <table border="1">

table添加正确的样式 我相信没有人用这么丑的表格。

2、如果设置了cellspacing="0" cellpadding="0"表格是这样的 <table border="1" cellspacing="0" cellpadding="0">

table添加正确的样式好像好看了许多

但是很少人这么写了,表格的样式应该交给css,那么如果做一个带边线的表格要怎么做呢,首先给table加border样式。会变成这样

table添加正确的样式

table {
border: 1px solid #ccc;
}

那么cellpadding=“0”:单元格边距等于0,其默认值为1px,其等同于css中的:{padding:0;}

cellspacing="0":单元格间距等于0,其默认值为2px,其等同于css中的:border-collapse: collapse(边框合并)

那么我们可以这样写,但这样需要加<table border="1">

table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border:1px solid #ccc; border-collapse: collapse;} 

table添加正确的样式

如果不想加<table border="1"> 需要设置table tr th和table tr td

table tr th, table tr td { border:1px solid #ccc; }
table { width: 200px; text-align: center; border-collapse: collapse;}

效果同上。这种比较推荐,毕竟结构样式分离,控制起来比较好控制

上一篇:UI设计文本框解决Placeholder的在IE10 以下 IE 9 IE8 IE 7 的兼容问题


下一篇:C/C++的四大内存分区 分类: C/C++ 2015-05-09 01:36 163人阅读 评论(0) 收藏