使用table进行制作网页历史渊源

2012年11月25日 来源:Cocss 0条评论 272 views 标签:

十年之前,网络的发展仍处于起步阶段经历。开发人员通常会使用HTML4 table建立网站的布局构造,这是标准的做法大部分时间。当CSS终于成长为流行的先例开始发生变化。这时开发人员更容易使用div元素和一切与CSS样式表的位置。

Featured Image - HTML4.0 books for coding websites development

但即使是现代的做法HTML5/CSS3,我们仍然可以找到使用 table。该规范并没有太大的改变,因为HTML4和良好的推理。在这篇文章中,我想与大家分享一些技巧和想法时,你应该使用table在网页中。我们也可以看看table的未来内容在互联网上。

历史渊源

table 原来用来网站布局,因为其灵活性的最佳解决方案。开发人员希望支持所有的屏幕分辨率及其table可以处理这些额外的属性。这些措施包括宽度的属性中指定一个百分比值。这意味着你的表中的行会自然调整的基础上的浏览器窗口的百分比。

Rail train in San Joaquin Valley California

但是,这种格式继续 保持与现代HTML5 table 一样。你可以阅读一些有关W3Schools的优秀资源页面the HTML table element。也有相关的标签和可选的属性与格式表的列表。

如何显示表格数据

到目前为止,最常见的巧用现代表是在格式化表格数据时。这可能看起来像一个没有脑子,但我遇到了无数的开发者简单地厌恶表。这是一个全或无的关系,在那里你可以使用他们,或者你没有。这是一个可怕的态度,因为你对抗的自然秩序!

HTML表格的数据列表,目录,图片库,产品,或任何类似的块式布局是伟大的。您就可以使用CSS创建这些页面,但它会需要一连串的附加属性。那为什么还要走这条路,如果需要额外的工作吗?

table 自然可以被分为核心部分,一个标题  header,正文 body 和页脚 footer。这个示意图如下任何传统的布局,在这里您可以有标题行定义的数据类型,其次是数据行的一个长长的清单。添加页脚是完全可选的,但它可以用于某些类型的传说或表的主要经济指标。

格式化的表格标题

另一种新HTML5对页面顶部的表格标题 table captions 徘徊。这些领域往往是里面的表格元素,但在你面前打开任何新的内容行。这几乎就像一个头定义在你的表中列出的内容。

进一步扩展了这一点,你可以添加一个整体的描述性定义你的表输出的文本块。新的HTML5标签的详细信息和总结 details and summary ,最终都是可选的,但非常有用的。我能想到的各种企业环境中,您需要描述和共享各种数据的一个公共网页上。

Table caption and summary tags HTML5 HTML4 specs

这额外的内容是有益的不只是为最终用户,同时也为搜索引擎的爬虫。的字幕被认为很像表头和摘要描述是一个很好的方式来加载相关的关键字。同样,这些完全是可选的标签,但它们可以产生较大的努力让您的网页有组织。

动态JS特效

表可以是更酷,如果你的JavaScript库配对到你的布局。这是可能的,让用户的功能,如拖和下降,内联编辑 inline editing,和这么多。想想所有的不同的定价表或你见过的成员名单。所有这些布局可以从头开始创建的自定义和,甚至优化表。

Tablecloth JavaScript library tables HTML data

我最喜欢的一个脚本被命名为 Tablecloth ,这是一个完全动态的基于JavaScript的开源解决方案。包括CSS/ JS文件的副本,您可以添加悬停在网页中的任何表元素的功能。当您将鼠标放在表格单元格中,你会看到一个高亮显示的行和列的效果,符合您的当前位置。

如何确定合适的情形?

它可以是很难搞清楚的情况下,需要在 table 布局。我很少使用它们,除非这往往是格式化成排的内容。这样能很好的原因之一,是因为你并不需要调整浮动的div和创建“人工”排在标记。

表格数据可以发现可以几乎在每一个网站,所以它不是作弊使用div或其他标记替代。表是有利于开发谁知道他们为什么要使用该标记,以及如何可以一起行和列的格式。表格布局画廊较小的缩略图链接到完整的图像,视频,无论是完美的。

Fireplace room interior design

我认为最大的原因而不能使用表进行格式化时,你的整个网站布局。较新的HTML5头,页脚,导航,和section元素,更好的适合的角色。但要知道有没有“错误”的区域使用表中的内容。它最终归结为个人喜好和你的感觉舒适的设计到您的标记。



无觅m88帮助网站插件,快速提升流量

你也可以分享到:

继续查看有关: 的文章

上一篇:

下一篇: