返回
前端
分类

table布局是网页早期布局实现的主要手段,也希望大家多多支持帮客之家

日期: 2019-11-17 20:48 浏览次数 : 94

html5 div布局与table布局详解,html5div布局table

本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下

div布局:html+css实现简单布局。

#必赢备用网址 ,container中height不能写成百分数,必须为具体高度。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>div布局</title>  
    <style type="text/css">  
        body{  
            margin:0;  
            padding:0;  
        }  
        #container{  
            width:100%;  
            height:650px;  
            background-color: aqua;  
        }  
        #heading{  
            width:100%;  
            height:10%;  
            background-color: azure;  
        }  
        #content-menu{  
            width:30%;  
            height:80%;  
            background-color: chartreuse;  
            float:left;  
        }  
        #content-body{  
            width:70%;  
            height:80%;  
            background-color: chocolate;  
            float:left;  
        }  
        #footer{  
            width:100%;  
            height:10%;  
            background-color: darkgrey;  
            clear: both;  
        }  
    </style>  
</head>  
<body>  
    <div id="container">  
        <div id="heading">头部</div>  
        <div id="content-menu">内容菜单</div>  
        <div id="content-body">内容主体</div>  
        <div id="footer">底部</div>  
    </div>  
</body>  
</html>  

效果图:

必赢备用网址 1

table布局:

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>table布局</title>  
</head>  
<body marginwidth="0px" marginheight="0px">  
    <table width="100%" height="650px" style="background-color: aqua">  
        <tr>  
            <td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td>  
        </tr>  
        <tr>  
            <td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td>  
            <td width="60%" height="80%" style="background-color: coral">内容</td>  
            <td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td>  
        </tr>  
        <tr>  
            <td colspan="3" width="100%" height="10%" style="background-color: crimson">这是底部</td>  
        </tr>  
    </table>  
</body>  
</html>  

效果图:

必赢备用网址 2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

div布局与table布局详解,html5div布局table 本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下 div布局: html+css实现...

大家好,我是IT修真院郑州分院,一枚正直、纯洁、善良的web程序员。

div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢
div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢

今天给大家分享一下,修真院官网 CSS任务中可能会使用到的知识点:

div+css布局较table布局有哪些优点?

一、背景介绍

table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本

以及静态图片等组成的,类似于报纸的形式,分区分块显示,table标签的结构表现恰好可以

满足这样的要求。但是随着网页要求的提高和技术的不断探索更迭,尤其是W3C(万维网联

盟)及其他标准组织制定的标准出台后,明确了table标签不是布局工具,使table标签重新回

到其原有的作用上(即仅作为呈现表格化数据的作用),而提倡使用div+css的布局组合。

二、知识剖析

2.1使用table布局的特点

优点: 

 1、对于新手而言,容易上手,尤其对于一些布局中规中矩的网页,更让人首先想到excel,进而通过使用table去实现它。

2、表现上更加“严谨”,在不同浏览器中都能得到很好的兼容

3、通过复杂的表格套表格的形式,也可以实现比较复杂的布局需求。布置好表格,然后将内容放进去就可以了。

table布局是网页早期布局实现的主要手段,也希望大家多多支持帮客之家。4、它可以不用顾及垂直居中的问题。

5、数据化的存放更合理。

缺点:

1、标签结构多,复杂,在表格布局中,主要是用到表格的相互嵌套使用,这样就会造成代码的复杂度更高!

2、表格布局,不利于搜索引擎抓取信息,直接影响到网站的排名

2.2使用div+css布局的特点

优点

1、符合W3C标准的,W3C标准提出网页由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。

2、布局更加灵活多样,能够通过样式选择来实现界面设计方面的更多要求。

3、布局改版方便,不需要过多地变动页面内容,通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

4、布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取,内容更便于搜索。

5、增加网页打开速度,增强用户体验。

缺点

1、开发技术高,要考虑兼容版本浏览器。目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。

2、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,

有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

2.3 div+css的布局较table布局的明显优势

1,其实也是div+css布局的第一个特点,table标签被严格地定义为存放数据的一个区域,而不是布局工具,它的布局形式不符合W3C标准,没有实现结构和表现的分离,它既有css的表现功能,也有html的结构功能。

2,table布局加载网页时,必须整体加载完,降低了网页的呈现速度,而div+css布局是边加载边显示的。

3,table布局在网页代码编写时,有时需要嵌套多重表格才能实现,但使用div+css布局,相对而言会减少许多嵌套时的代码,更容易检查和维护。

4,table布局不方便表现的更换,使用div+css布局,大多只要更改css样式表就能变化表现形式。

5、易于维护和改版。

三、常见问题

问题:如何在div+css布局中依然使用table布局中的一些功能?

四、解决方案

第一种,就是在div+css的布局中局部使用table布局(主要是纯表格数据的实现)。

第二种,是使用相关的默认样式表。如下代码对应表所示:

table    { display: table }

tr      { display: table-row }

thead    { display: table-header-group }

tbody    { display: table-row-group }

tfoot    { display: table-footer-group }

col      { display: table-column }

colgroup { display: table-column-group }

td, th  { display: table-cell }

caption  { display: table-caption }

五、参考文献

参考一:css中与table有关的布局

参考二:table和CSS+DIV排版模式的优缺点比较

参考三:详解DIV+CSS布局的好处和意义

参考四:Table布局的优缺点介绍及为什么不建议使用

参考五:主流网站为什么用div+css布局,而不用table

六、视频链接

div+css的布局较table布局有哪些优点_腾讯视频

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~