`
ghyghoo8
  • 浏览: 193225 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

[转]DIV与TABLE的区别,简单分析

阅读更多
1.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
2.结构清晰,容易被搜索引擎搜索到,天生优化了seo;
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点;
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题,改变字体颜色,字体样式等等;
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS;
6.提高易用性。使用CSS可以结构化HTML,例如:<p>标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本;
7.可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint;
8.更好的控制页面布局;
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking);
11.Table 布局灵活性不大,你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写;
12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制;
13.Table 中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强;
14.在几乎所有的浏览器上都可以使用;
15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
16.使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目;
17.你可以轻松地控制页面的布局;
18.你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
分享到:
评论

相关推荐

    div和span的区别

    &lt;title&gt;div与span的区别 &lt;p&gt;div标记不同行: &lt;div&gt;在线_logo.gif" border="0"&gt;&lt;/div&gt; &lt;div&gt;在线_logo.gif" border="0"&gt;&lt;/div&gt; &lt;div&gt;在线_logo.gif" border="0"&gt;&lt;/div&gt; &lt;p&gt;span标记同一行: &lt;span&gt;&lt;img src=...

    表格到DIV转换工具

    1. **表格转换**: Table2CSS能够自动分析HTML中的表格结构,将其转换为相应的`&lt;div&gt;`元素和CSS样式。这样,原有的表格数据仍得以保留,但布局方式变得更现代。 2. **支持外部CSS**: 转换后的页面可以引用外部CSS...

    用div+css模拟表格对角线

    在网页设计中,使用`div`和`CSS`来模拟表格对角线是一种常见的技术,尤其是在需要自定义样式或者在不支持`&lt;table&gt;`元素的环境中。本篇将详细讲解如何利用`div`和`CSS`实现这一效果,并通过提供的`demo.html`文件中的...

    纯table导出excel文档

    在现代Web开发中,将网页中的表格数据导出到Excel文档是常见的需求,尤其是在数据分析、报表展示和数据共享等场景。"纯table导出excel文档"这个标题所指的是一种技术实现,它允许用户直接从网页上的HTML表格(table...

    java实现 html转Excel

    Element table = doc.select("table").first(); String[][] data = extractTableData(table); // 创建Excel工作簿 HSSFWorkbook workbook = new HSSFWorkbook(); Sheet sheet = workbook.createSheet("Sheet1...

    div+css布局

    #### 二、传统布局方式与CSS布局的区别 传统的网页布局方式往往依赖于HTML自身的标签属性,如`&lt;table&gt;`的`cellpadding`、`hspace`等,以及直接在HTML标签中设置的样式属性(如`align="left"`)。这种方式虽然直观...

    【JavaScript源代码】纯JS将table表格导出到excel的方法.docx

    以下是一个简单的示例,演示如何使用Blob和URL.createObjectURL实现非IE浏览器的导出: ```javascript function method5(tableId) { var table = document.getElementById(tableId); var csvContent = "data:text...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

    DIV+CSS 的发展可以分为三个历史时期: Table----&gt;table+css----&gt;div+css。从 Table 到 div+css,我们可以看到网页设计的发展趋势。 CSS 的必要性 使用 `&lt;span&gt;` 元素,我们可以看出,CSS 的基本语法 `&lt;元素名 ...

    table冻结表头

    在实际应用中,"table冻结表头"插件能够有效地提升长表格的可读性,特别是在数据分析、报表展示等领域。由于它具有良好的可定制性和易于使用的特性,对于开发者来说,是一个非常实用的工具。 总之,"table冻结表头...

    table固定表头,css控制

    在某些情况下,直接将表头元素的`position`设为`fixed`,可以实现简单的固定效果。但这种方法可能不适用于复杂的布局,因为固定定位的元素不再考虑其在文档流中的位置,可能会与其他元素重叠。 在test1.html和test2...

    js实现html table 行,列锁定的简单实例

    3. 接下来,函数创建了四个新的div元素,分别用于存放锁定的表头(`_tableHead`)、锁定的列(`_tableColumn`)、浮动的数据部分(`_tableData`)以及一个用于克隆表头和锁定列的临时div(`_tableFix`)。...

    IE和谷歌浏览器下div宽度不一致的问题解决.txt

    本文将针对这一具体问题——DIV宽度在IE与Chrome下的表现差异,进行深入分析并提出解决方案。 #### 问题概述 在实际项目中,开发者可能会发现某些布局在Chrome等现代浏览器上显示正常,但在IE浏览器(特别是IE8及...

    使用jsoup解析html的table中的文本信息实例

    你可以根据需要扩展这个例子,例如,将文本信息存储到列表或数据库中,或者对数据进行进一步的处理和分析。 总之,Jsoup为Java开发者提供了一种高效且灵活的方式来解析HTML文档,特别适用于处理网页抓取和数据提取...

    用DIV+CSS技术制作一个简单的网页 我的家乡主题

    - **列表和表格**:可以使用list-style-type设置列表项标记,使用table元素创建表格,并通过CSS控制表格的样式。 #### 4. **HTML元素使用** - **导航栏(nav)**:通常用于放置网站的主要导航链接。 - **横幅...

    HTML静态的购物网站模版

    两个模版分别使用了div+css和table两种不同的布局方法。 1. **Div+CSS布局**: Div(Division)是HTML中的一个容器元素,常用于组织和布局页面内容。CSS(Cascading Style Sheets)则是用于控制网页样式和布局的...

    用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)

    - **Table布局**: 尽管不建议在现代网页设计中广泛使用,但仍然适用于简单的数据展示表格。 - **导航栏效果**: 创建一个美观且易于使用的导航栏,可能包括固定位置、下拉菜单等功能。 - **Banner设计**: 页面顶部的...

    html+xhtnl+div+css最好的入门实用资料

    8. 配套资源:压缩包中的源码文件是你学习的重要参考资料,可以对照着书中的讲解去分析和修改这些代码,进一步提升你的编程能力。 通过这些知识点的学习,即使没有基础,也能在短时间内掌握网页设计的基本技能,...

    JavaScript中无法通过div.style.left获取值的解决方法

    综上所述,我们可以知道,使用JavaScript通过div.style.left获取样式值时的限制,并且理解offsetLeft和left属性的区别及其应用场景。通常情况下,如果需要改变元素的位置,使用offsetLeft获取偏移量的数值,并通过...

Global site tag (gtag.js) - Google Analytics