表格与基于 CSS 的网页布局 [英] Table vs CSS-based layouts for web pages

查看:22
本文介绍了表格与基于 CSS 的网页布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的网站上使用 HTML 模板,这些模板来自销售模板的网站,因为我不是设计师并且想要一些准备好的东西,我使用 Rails 进行开发.我注意到一些站点通过使用 CSS 和页面中组件的绝对定位将其模板设计为Tableless".我实际上已经习惯在我的页面中使用表格.

I use HTML templates for my website from sites that sell templates as I'm not a designer and would like something ready, I use Rails for my development. I noticed that some sites design their templates as "Tableless" by using CSS and absolute positioning of components in the page. I'm actually used to using tables in my pages.

您对此有何看法?不使用表格真的有好处吗?

What is you opinion about that? Are there real advantages of not using tables?

推荐答案

简短的回答是您应该将表格用于表格数据(而不是布局,请参阅 这里 为什么),否则您将正确的元素用于正确的目的,p 用于段落,div 用于有意义除法(不要滥用 div),等等.每个元素都有一个用途,您应该使用 w3.org 来查看事情了.

The short answer is that you should use tables for tabular data ( and not layout, see here why ), otherwise you use the right element for the right purpose, p for paragraphs, div for meaningful division ( don't abuse divs ), et cetera. Each element serves a purpose and you should use w3.org to look things up.

话虽如此,有些人仍然对 CSS 抱有错误的心态,您应该避免完全依赖绝对定位和像素完美滥用的布局,而应尽可能依赖基于 em 的流畅布局因为它们更能适应不同的屏幕分辨率和环境.

That being said, there are some people who still have the wrong frame of mind in CSS, you should avoid layouts that are completely reliant upon absolute positioning and pixel perfect abuse, instead rely on fluid, em-based layouts when you can as these are more adaptable to different screen resolutions and environments.

使用正确语义标记的 HTML 和 CSS 的其他好处是您可以控制样式表中的所有样式,从而导致更少的标记汤代码(更小的文件大小),您只需担心更新内容,不是在标记内部布局 [展示 (css) 与行为 (js) 和内容 (html) 的分离].

Other benefits of using proper semantically marked up HTML and CSS would be that you control all styles from the style-sheet, so that results in less tag soup code ( smaller file size ) and you only have to worry about updating content, not layout inside the markup [ separation of presentation ( css ) from behavior ( js ) and content ( html ) ].

这篇关于表格与基于 CSS 的网页布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆