`
wungking
  • 浏览: 10666 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

页面设计中table和div的适当选用

阅读更多

Table在早期的页面设计中应用广泛,但是随着互联网的发展table渐渐被抛弃,现在互联网上只有一小部分老站(有名气,不必要改的那种有很多),还是沿用着table来布局页面,现在的新站基本上都是使用了div+css来布局页面,但是很多web前端初入门的朋友就会产生一种错觉,认为table会是页面对搜索引擎不友好的元凶,所以在设计列表的时候总是会去使用dt ul 之类的标签。这样有的使用会让你多花很多设计页面样式的时间,而真正对搜索引擎优化的效果很微弱。

大量使用table的一个非常大的弊端除了对搜索引擎不友好,还有就是对程序员也非常的不友好,table的大量嵌套,会让人看的很晕。但是如果配合着div使用的话就会提供效果,达到的效果或许比dtul来的更加好。

还有一个问题就是大量的table tr td 会让你页面的语义非常的差,这里先不讨论标签语义化,大家自己去百度搜一下,语义良好的页面,搜索引擎是非常的喜好的,这里我先介绍一个语义化很好的网站 www.w3school.com.cn 大家也可以自己动手操作,用谷歌浏览器去掉它的css链接,然后再看它的页面布局,你会发现,它的所有的标题,列表,都井然有序,就像是写论文的时候非常正规的排版一样,即使不要样式表,相信大家也不会产生非常大的厌恶感,但是有些网站就不一样了,去掉css样式文件之后,页面直接就瘫了,这里再发个站www.webgamei.com 去掉它的css样式文件 (2个) 再看页面,因为它的样式很多都是直接写进table中的style中,所以你看起来没有很大的变化,但是你看导航部分,会发现,页面毫无语义感,若是页面的样式分离开了,那去掉css文件,估计没法看了。

所以这里建议,在你的页面设计出来之后,你可以先不去加css样式,直接先把默认样式的版面写出来,在根据页面去加css自定义样式,这样会不会更高效点呢 ,呵呵 ,我没试过,只是这么想而以。

关于语义的内容很多,这里我也不说太多了,介绍大家一本书 《编写高质量代码--Web前端开发修炼之道》很不错的一本书,里面对语义化介绍的很清楚。页面布局是一个经验积累的过程,看到好的网站,它的页面布局,你都可以借鉴一下,看到不好的,你也可以想一下该怎么去优化它,这样才能在web前端之路上成长更快。

分享到:
评论

相关推荐

    table转div工具

    相比之下,div是一个无语义的容器,通过CSS可以实现流式、网格、定位等多种布局方式,适应不同设备和屏幕尺寸,更适合现代网页设计的需求。 "table转div工具"能够自动分析HTML中的table元素,将其转换为div结构,并...

    Table转div+css工具

    Table是一种早期的网页布局方式,它主要用于数据展示,但在复杂的网页设计中,表格布局可能导致页面加载速度慢,且不易于调整和扩展。相比之下,Div是HTML中的一个通用容器元素,配合CSS(层叠样式表)可以实现更...

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...

    table转div、table转css

    在网页设计领域,将传统的HTML表格(table)转换为由CSS布局控制的div元素,是一种常见的优化网页可维护性和响应式设计的方法。标题"table转div、table转css"所指的就是这一过程,即利用特定工具将原本用表格布局的...

    将table转换成div+css

    在网页设计中,传统的HTML表格(table)曾经是布局的重要方式,但由于其对网页加载速度的影响和不灵活性,现代网页设计更多地倾向于使用CSS布局,尤其是div元素配合CSS样式。"将table转换成div+css"这个主题正是针对...

    div table的使用

    在网页设计中,`div` 和 `table` 是两种非常重要的HTML元素,它们各自有着不同的用途和特性。本文将深入探讨如何在服务器端利用存储过程生成`table`数据,并将其嵌入到`div`容器中,以实现更灵活的页面布局。 首先...

    css+div和table+css的比较

    表格可以轻松地创建出整齐的布局,而且在早期的网页设计中,table 布局非常流行。但是,table 的过度使用会带来代码复杂度增加、加载速度变慢以及不利于搜索引擎优化等问题。当表格嵌套过多时,代码可读性和维护性...

    table转换div

    在网页设计领域,"table转换div+css"是一种常见的优化网页布局的方法。表格(table)在HTML中主要用于数据展示,但其布局方式相对固定且难以调整,不适用于响应式设计和现代网页的灵活布局。而Div(division)配合...

    Html Table 转 Div 工具

    "Html Table 转 Div 工具"是一个帮助开发者将原有的HTML表格结构转换成基于Div的布局工具,这种转换在现代网页设计中尤为常见,因为Div更利于实现响应式设计和CSS3的高级样式。 在HTML中,表格通过`<table>`, `<tr>...

    页面设计中table和div的合理应用简要说明

    本文将探讨table和div在页面设计中的合理应用。 首先,DOCTYPE声明在HTML文档中的作用不可忽视。它是文档类型的声明,告知浏览器应以何种标准解析页面。在HTML5中,推荐使用的DOCTYPE声明是`<!DOCTYPE html>`,这是...

    table转化div软件

    总结来说,"table转化div软件"是网页设计和开发中的一个重要辅助工具,它可以帮助我们快速地将基于表格的旧版网页转变为符合现代标准的CSS+`<div>`结构,从而提高网页的性能、可维护性和可访问性。

    Table2CSS表格转CSS+DIV布局工具

    综上所述,Table2CSS工具是一个强大且实用的网页设计辅助工具,它简化了从传统表格布局向CSS+DIV布局的转换过程,提高了网页设计的质量和效率。对于那些希望优化网页性能、提升用户体验以及便于维护的设计师来说,这...

    div与table的区别

    讲述div与table在设置边框时的区别

    漂亮的网页后台模板(div+css+table)

    表格(`table`)在网页设计中主要用于展示结构化数据,如数据表、日历等。虽然现代网页设计更倾向于使用CSS布局(如Flexbox或Grid)来代替`table`,但在某些场景下,表格仍然是一个有效的工具,特别是在后台管理系统...

    html小型编辑器针对table中cell或div

    针对table中cell或div等中得值进行html编辑和保存

    ASP.NET 企业网站管理系统,Access版,本程序未开源,只适合建站。界面非DIV+CSS,采用老的Table布局,更方便老美工修改程序。

    然而,随着Web设计趋势的发展,许多现代设计师和开发者已经转向了使用更灵活的CSS布局方法,如Flexbox和Grid,以适应不断变化的网页设计需求。 在文件名称列表中,"codefans.net"可能是该项目的主程序文件或者包含...

    网页设计实验 Table的使用

    1.在代码段中插入五行三列的表格,并在body中对表格进行描述“表格的跨行”。 2.合并第一行所有的列。选中第一列,右键会有合并单元格,拖动单元格或者在代码段的height和width输入值来设置单元格大小,用colspan...

    table 的用法 网页设计 中html 语言中table用法

    HTML表格是网页设计中不可或缺的一部分,它用于组织和呈现数据,使其更易于理解和解析。本文将深入探讨HTML语言中`<table>`元素的用法,包括如何创建基本表格,以及如何通过各种属性来定制表格的外观和行为。 首先...

    网页设计div+css

    在本项目中,我们关注的是“网页设计div+css”,这是一项基础且至关重要的技术,用于构建现代网页的结构和样式。"表格布局"是早期网页设计中常见的一种方式,而"品味主题"则意味着我们要打造一个以咖啡文化为主题的...

Global site tag (gtag.js) - Google Analytics