WEB标准:Div布局与Table布局

web|web标准

  前几天在做个网站,想全部用Div布局,起初控制得还好,代码也很整洁,但是Div没有垂直居中对齐(至少我没有过找到相关属性),后到不结合Table,如下代码:

  1、无Table

<div class="sectionItem">
     <div class="image">
         <a href="RoadWarningLamp/default.aspx"><img src="http://www.webjx.com/htmldata/2005-09-14/imagesHandler.aspx?id=SectionInfots-303-1.JPG&Height=-1" align="middle" border="0" ></a>
     </div>
     <div class="title">
      <a href='RoadWarningLamp/default.aspx'> 
       Road Warning Lamp
      </a>
     </div>
    </div>

  试了半天,也不能让图片垂直居中显示

  2、有Table

<div class="sectionItem">
     <div class="image">
      <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
       <tr>
        <td align="center" valign="middle">
         <a href="RoadWarningLamp/default.aspx"><img src="http://www.webjx.com/htmldata/2005-09-14/imagesHandler.aspx?id=SectionInfots-303-1.JPG&Height=-1" align="middle" border="0" ></a>
        </td>
       </tr>
      </table>
     </div>
     <div class="title">
      <a href='RoadWarningLamp/default.aspx'> 
       Road Warning Lamp
      </a>
     </div>
    </div>

  这样之后才足了我的需求,不知道那位可以做到不用Table实现

时间: 2024-12-31 02:50:38

WEB标准:Div布局与Table布局的相关文章

DIV+CSS与TABLE布局的明显区别

DIV+CSS布局较Table布局减少了页面代码,加载速度得到很大的提高,这在Spider爬行时是非常有利的. 网站布局从以前的TABLE方式转换到现在的DIV+CSS布局方式..那么这种方法比起以往的TABLE布局方式对网站都有什么影响呢? 本文来做个简单介绍 主要体现在以下几个方面 一.解决表格嵌套让蜘珠触角无数不大 很多"网站如何推广"的文章中称,搜索引擎一般不抓取三层以c的官方证实.我的几项实验结果没有完全出来,但根据目前掌握的情况来看,Spider爬行Table布局的页面,遇

利用WEB标准创建两栏页面布局

web|web标准|创建|页面 使用 Web 标准进行页面设计,有一种信仰就是不使用表格兰进行基本的页面排版. 网页常见的两栏布局,我们往往就是通过一个 1 行 2 列的表格来实现.例如:<table border="0" width="760">    <tr>        <td style="width: 30%;">左侧栏</td>        <td style="wi

左右两栏式WEB标准(DIV+CSS)布局代码

菜单层固定宽度,内容层自适应.. 以下是代码:<html> <head> <title>Nice and Free CSS Template 2</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0px; margin:0px; } body {

div+css布局和table布局区别

一.用div+css网站布局的好处 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息. 2:提高搜索引擎对网页的索引效率 用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价. 3:提高页面浏览速度 对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小. 4:易于维护和改版 你只要简单的修改几个CSS文件就可以重新设计整个网站的

基于XHTML标准DIV+CSS布局对SEO的影响

css|seo|xhtml|标准 前两天发完<SEO参考:DIV+CSS三行两列经典布局>一文,不少朋友在MSN上问我,使用XHTML标准的DIV+CSS布局对于SEO到底有什么作用.这两天简单总结了一下,写出来供参考. XHTML技术问题请参考相关网站研究,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二

为什么要选择DIV+CSS的网站布局方式

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 为什么要选择div+css的网站布局方式,看完下面容你就会很详细的了解到他的作用.在SEO搜索引擎优化中有一项很重要的内容是"网站内部结构的优化",主要就是通过对网站的链接.结构.标签.排版等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎中获得较高的评分,从而获得较好的排名.Div+css的

web标准实现高效开发系列之二

web|web标准 web标准让大家学会了手写代码,显然这样的效率不够高.关于高效开发早已提到了web标准推广的日程上来了,可是现在的成效还不是很让人满意,我个人观点,开发的时候从整体到局部,提高开发效率的时候要从局部到整体,因为这是一种组装,比如head区域,文章显示块,内容列表块,表单块......让你的代码复用起来. 小毅已经整理很很多了,但是没有针对DW的,我个人比较喜欢DW,界面美观方便,而且提供多种浏览器预览,做法就是将常用的XHTML代码作成存入DW的剪辑库,不需要的部分就删除掉,

网页设计采用DIV+CSS相比TABLE的优势有哪些

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 几年前DIV+CSS开始逐渐成为网页设计的首选方式,目前来看,DIV+CSS已成为网页设计的标准,国内非常多的网站在这几年已完成了从TABLE到DIV+CSS的重构.笔者也是一名偏爱这种方式的网页设计师,工作3年来一直采用div+css方式为客户提供设计.那么相比TABLE,它具有哪些优势呢?下面谈谈个人几点体会和认识,希望对同行和有关人员有

给这个web标准时代做个表格

好多人认为web标准就是要抛弃table,其实不是.要抛弃的不是table,而是table布局,关于table布局的蹩脚之处就不再详细谈了.而table在何处使用也不详谈了,呵呵.(是不是很懒?) 这下面是简单的做了一个table,简单到只花了几十分钟时间,写好很久了,直到今天才放出来,担心被说太初级了.这个table有所区别的便是用colgroup来定义列的样式(我发现好多人都不曾用过colgroup).不用在td里添加一堆的width.bgcolor.这样来做一个在线的列表会使页面大大减少.