用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>

用DIV+css写Table,布布扣,bubuko.com

时间： 2024-12-17 02:45:46

用DIV+css写Table的相关文章

html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 <table> 后,在读</table> 之前,table 中的内容不加载,或者传输中断了的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 . div与css配合使

div+css写的进度条

再论：div+css对网站的好处

1,内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理.生成的HTML文件代码精简,更小打开更快. 2,改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版.对于门户网站来说改版就像换件衣服一样简单容易. 3,css+div使改版网站更简单容易!不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版. DIV+CSS对于门户网站来说改版就像换件衣服一样简单

CSS属性 table 的 border-collapse 边框合并

说明该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+CSS 时代 table 的权重越来越低,但是有时候,还是局部地方table 还是挺好用的特别是制表方面,还是table 比较的方便.当然,制表肯定少不了边框,但是如果你直接在td上加边框,就会出现一种情况,table 的外围一周是单线,里面都是双线. 你也可以通过其他分开设置的方法实现全部单线,

div+css完成首页布局

要完成一个简单的网站首页并不难,我们只要寻找到方法便很容易,完成一个简单的网站首页我们只要将整体的首页布局用div+css写出来然后再填充内容那么一个简单的网站首页便可以完成了,那么我们一步一步来实现他们,首先我们从宏观的角度将首页分成几大块,以下的案例我们将首页分成三大块: 这个首页我们先不管放置大图的部分,我们将这个简单的首页分为三大块,这样我们就需要来一个最大的div包含我们要建立三大块的div,我们将最大的div取名为"container"容器的意思,那么再将其他三个div按照

初学者用div+css结构写网页的几个误区

1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人.发布时间.信息标题.联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似

项目期复习总结2：Table， DIV+CSS，标签嵌套规则

文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比方数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较经常使用 ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,

项目期复习总结：Table， DIV+CSS，标签嵌套规则

目录: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的区别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比如数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较常用 ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,tab

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w