CSS表格属性：
显示表格边框有时候特别重要，它能让表格结构更清晰。
默认的表格有双边框，这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
1.CSS布局常用的方法：float : none | left | right
取值：
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边
它是怎样工作的，看个一行两列的例子
xhtml:
<div id="warp">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
CSS:
#wrap{ width:100%height:auto}
#column1{ float:leftwidth:40%}
#column2{ float:rightwidth:60%}
.clear{ clear:both}
position : static | absolute | fixed | relative
取值：
static : 默认值。无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
它来实现一行两列的例子
xhtml:
<div id="warp">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>
CSS:
#wrap{ position:relative/*相对定位*/width:770px}
#column1{ position:absolutetop:0left:0width:300px}
#column2{position:absolutetop:0right:0width:470px}
他们的区别在哪?
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！
2.CSS常用布局实例
一列
单行一列
body { margin: 0px padding: 0px text-align: center }
#content { margin-left:auto margin-right:auto width: 400px width: 370px}
两行一列
body { margin: 0px padding: 0px text-align: center}
#content-top { margin-left:auto margin-right:autowidth: 400px width: 370px}
#content-end {margin-left:automargin-right:auto width: 400px width: 370px}
三行一列
body { margin: 0pxpadding: 0px text-align: center }
#content-top { margin-left:auto margin-right:auto width: 400px width: 370px }
#content-mid { margin-left:automargin-right:auto width: 400px width: 370px}
#content-end { margin-left:automargin-right:autowidth: 400px width: 370px}
两列
单行两列
#bodycenter { width: 700pxmargin-right: automargin-left: autooverflow: auto }
#bodycenter #dv1 {float: leftwidth: 280px}
#bodycenter #dv2 {float: rightwidth: 410px}
两行两列
#header{width: 700pxmargin-right: automargin-left: autooverflow: auto}
#bodycenter { width: 700pxmargin-right: automargin-left: autooverflow: auto}
#bodycenter #dv1 { float: leftwidth: 280px}
#bodycenter #dv2 { float: rightwidth: 410px}
三行两列
#header{width: 700pxmargin-right: automargin-left: auto }
#bodycenter {width: 700pxmargin-right: automargin-left: auto }
#bodycenter #dv1 { float: leftwidth: 280px}
#bodycenter #dv2 { float: right width: 410px}
#footer{ width: 700px margin-right: automargin-left: auto overflow: auto }
三列
单行三列
绝对定位
#left { position: absolutetop: 0px left: 0pxwidth: 120px }
#middle {margin: 20px 190px 20px 190px}
#right {position: absolutetop: 0pxright: 0px width: 120px}
float定位
xhtml:
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
#wrap{ width:100%height:auto}
#column{ float:leftwidth:60%}
#column1{ float:leftwidth:30%}
#column2{ float:rightwidth:30%}
#column3{ float:rightwidth:40%}
.clear{ clear:both}
float定位二
xhtml:
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS:
body {margin: 0padding-left: 200pxpadding-right: 190pxmin-width: 240px}
.column {position: relativefloat: left}
#center {width: 100%}
#left {width: 180pxright: 240pxmargin-left: -100%}
#right {width: 130pxmargin-right: -100%}
两行三列
xhtml:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100%height:auto}
#wrap{ width:100%height:auto}
#column{ float:leftwidth:60%}
#column1{ float:leftwidth:30%}
#column2{ float:rightwidth:30%}
#column3{ float:rightwidth:40%}
.clear{ clear:both}
三行三列
xhtml:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">这里是底部一行</div>
CSS:
#header{width:100%height:auto}
#wrap{ width:100%height:auto}
#column{ float:leftwidth:60%}
#column1{ float:leftwidth:30%}
#column2{ float:rightwidth:30%}
#column3{ float:rightwidth:40%}
.clear{ clear:both}
#footer{width:100%height:auto}
用CSS设置html中的表格边框样式，要设计的样式非常多，下面举例说明
工具：
记事本
浏览器
方法如下：
CSS代码：
table-a table{border:1px solid #F00}<!--关键代码：设置表格边框为1像素，实体，红色-->
HTML代码：
<div class="table-a"><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>网站名称</td>
<td>具体网址</td>
<td>网站说明</td>
</tr>
<tr>
<td>网站名称</td>
<td>具体网址</td>
<td>网站说明</td>
</tr>
</table>
</div>
效果图如下：
