用DIV+css写Table

做出的效果样式如下图，

1，首先考虑的是如何显示border，就像是分割代码，我把border分割为最外层DIV全border，和内层DIV的right和bottom的border，就是右边和下边。

2，考虑DIV的布局，内层DIVfloat：left，设定每个DIV的宽度和高度，就可以达到想要的效果，外层DIV由于内层漂浮也需要float：left

3，给需要不同高度和宽度的DIV加上不懂的class

代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

.hyjbtb{margin:0 auto; border:1px solid #666; width:605px; margin-left:100px;float:left;}
.colfirst{ width:200px;height:65px;border-bottom:1px solid #666;border-right:1px solid #666; float:left;}

.col{width:100px; height:65px;border-bottom:1px solid #666; border-right:1px solid #666; float:left;}
.col span b{width:100px; display:block;}
.collast{width:100px; height:65px;border-bottom:1px solid #666;float:left;}
.collast span b{width:100px; display:block;}

.colfirst1{ width:200px;height:20px;border-bottom:1px solid #666;border-right:1px solid #666; float:left;}
.col1{width:100px; height:20px;border-bottom:1px solid #666; border-right:1px solid #666; float:left;}
.collast1{width:100px; height:20px;border-bottom:1px solid #666;float:left;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p>123</p>
<div class="hyjbtb">
       <div class="colfirst">
       <span><b>享受服务</b></span>
       </div>
       <div class="col">
       <span><b>标准会员</b>（年消费 3-30万）</span>
       </div>
       <div class="col">
       <span><b>黄金会员</b>（年消费 30-60万）</span>
       </div>
       <div class="col">
       <span><b>白金会员</b>（年消费 60-100万）</span>
       </div>
       <div class="collast">
       <span><b>钻石会员</b>（年消费 100万以上）</span>
       </div>
       <div class="colfirst1">
       <span>会员专属折扣</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>专席收藏顾问服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>艺术品免费配送服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>会员专属折扣</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>《馆藏》会刊赠阅服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>艺术品资讯推送服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>会员专属折扣</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>展览、活动、讲座服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div><div class="colfirst1">
       <span>贴心生日礼物赠送服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>指定茶品免费品饮</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>艺术品保养修复</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>指定茶品免费品饮</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>大师作品定制服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>私人商务专属服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>作品限期预留服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>个人藏品展示代销</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colAll">
       <p>*注：1、金银类藏品不参加会员优惠活动；2、会员折扣不能与其它优惠券、活动优惠同时享用。</p>
       </div>
</div>
</body>
</html>