CSS表格属性用于设置HTML表格的样式，HTML表格由 <table></table> 标签嵌套 <tbody>， <tr>， <td>等标签组成，一个HTML表格默认至少包含table，tbody，tr，td四个元素。

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>

效果图如下：

---