关于table和div+css两种形式实现表格布局的优劣探讨,以及div+css形式的简单实现

       在前台开发的过程中,我们经常会使用表格结构进行页面的布局,实现这种页面结构通常有两种方式table标签和div标签加css来实现,但是我们现在通常都不再选择使用table标签,原因有多个方面。

      首先,table标签中的内容是自适应的,为了自适应,它要计算嵌套最深的节点以满足自适应,所以其加载速度相对div来说会慢;在技术升级的角度上来说,div符合W3C标准,而微软等公司均为W3C支持者,这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰;从开发的角度来说,内容和样式的分离,使页面和样式的调整变得更加方便;最后在搜索引擎的优化方面,这一点上其实是有争议的,部分人认为div+css的布局方式会更受到搜索引擎的青睐,但是实际上,如果一个网页架构的不好,不论table还是div都会被引擎所抛弃

      下面贴出实现代码

<div style=" border-radius: 10px;width: 335px;  background-color: #FFFFFF;margin : 50px 18px 30px 0px;">
			<div style=" width: 250; margin: 20px 0px 10px 98px;" >—·本试卷说明·—</div>
			<div style=" margin: 0px 0px 15px 13px ; color: #ACACB4;">——————————————————</div>
			<div>
				<div style="float: left; margin: 0px 0px 15px 45px;">考试时间</div><div style="float: right;margin: 0px 70px 10px 0px;">30分钟</div>
			</div>
			 <div style=" clear: both;"></div>
			<div>
				<div style="float: left;margin: 0px 0px 15px 45px;">考试时间</div><div style="float: right;margin: 0px 70px 10px 0px;">30分钟</div>
			</div>
			<div style=" clear: both;"></div>
			<div>
				<div style="float: left;margin: 0px 0px 15px 45px;">考试时间</div><div style="float: right;margin: 0px 70px 10px 0px;">30分钟</div>
			</div>
			
			</div>

      基本的div并列写法网络上已经数不胜数,但是如果要实现多行多列的表格形式,有一行代码需要注意

<div style=" clear: both;"></div>

      清理上一行的浮动布局,否则实现出来的结果会乱作一团。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值