Rails 搭建一个后台管理网站,用 div、table 还是 iframe?

zhangyanan · 2014年06月30日 · 最后由 ddyy 回复于 2014年07月01日 · 5455 次阅读

看了 ruby-china,用的 div 布局,用什么比较好?

<br>先把功能做出来了再说,别卡在这个问题上。

大家再辩论辩论,等你拿到答案的时候,后台基本上可以写完了。

#2 楼 @Rei #4 楼 @frank_ren

我 2006 年就在用 div ,甚至用 php 写了类,可以用 div 实现表格,当时很多门户首页都还是 Table。

但现在想起来,觉得更多的是折腾。一个后台而已,蜘蛛和盲人也都不来访问,可能用 Table 使得流量多出的几个字节,要等内容都下载完了才显示,但对于现在的网速来说,根本不是问题,何必用 div 折腾自己呢?

真有时间,可以把前台和推广先做了,后台用什么,真的不重要,重要的是快点搞定。

#6 楼 @Peter 本来可以结贴了,你一展开楼主又犹豫了。

用 table 和 iframe,显示器会爆炸。

#8 楼 @Rei 呵呵, 用 div 也好不到哪去,手机访问会乱扣费,还会泄漏联系人信息。

麻麻,这里坏淫好多~

楼主,HTML 标签耗费大量运算资源,导致全球变暖,我们只有一个地球,还是支持输出纯文本好了。

楼主没有展示自己的功课,所以我前面只回复与提问相称的回答。

不过以免避免误导其他人,完整解释一下:

  1. html tag 的工作是结构和语义,布局是 css 的工作。
  2. 在有对应语义标签的时候(例如 article,section,header...)用对应标签,没有就用 div,这是个万用标签没有特殊语义。
  3. table 的语义是表格,iframe 用来嵌入另外一个网页,这取决于要实现什么功能。错误使用标签是自寻烦恼,例如 table 带有自身的样式,用来布局还要先覆盖本身样式;如果 table 内元素不完整(tbody thead),有的浏览器会自动补全标签,这样又会多出来样式出现莫名其妙的问题。
  4. 完整的 tag 用法可以看 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
  5. 用对标签是 Web 开发者基本素养,如果是 10 年前很多问题没达成共识,并且限于当时的浏览器实现,错误使用标签没话说。但是现在已经有了很好的规范情况下还用错误标签,那么工作机会会远离你,潜在的合作伙伴会唾弃你。

最后,楼主提问前请做功课。

#12 楼 @Rei 结果没那么糟糕。

我赞成不要用 Table 来布大局,但有些布局用 div 搞不定或不好搞定,这就是我所谓的 “折腾”:为了一点点只有源代码才看得到的区别浪费了大量时间。

现在 discuz 等论坛不管前台后台还有大量表格,虽然比 10 年前少了点,但还是比比皆是,虽然 ruby-china 的 topics 是 div,但你要做成 discuz 的 forumdisplay 页面那种排版,用 div 会折腾死,而且还有跨浏览器问题。

后台如果只是左右两列用 div 可能更简单,如果列数过多,不用表格就是跟自己过不去。

另外,如果楼主是打工仔,老板给了钱又给了时间,当然可以折腾 div,如果是自己创业推产品,赶紧上线是王道,不然等你后台做好了,腾迅的山寨版都上市了。

#14 楼 @Peter 如果展示内容是多列,那就是个表格啊。

HTML 定义了那么多标签就是要因地制宜。

#15 楼 @Rei

真正的洁癖只会把表格用在展示数据列表,如果 主题列表 用 table,虽然是多列,他们也会觉得不能接受,因为这是有语义内容,你放在 Table 里,这让盲人怎么 “看”? 并且会马上告诉你怎么用 div 搞定。

我第一次学 html 就是从新浪首页抠 Table 开始的,Table 并没有那么不堪,加上 iframe 用来做后台,绝对简单清爽,现在 Discuz 的后台虽然只有左右两列,但还是用的表格。

#11 楼 @kgen 你的意思是 div?

#15 楼 @Rei 你说的是多行吧

#17 楼 @zhangyanan 他的意思是跟着起哄,呵呵

#16 楼 @Peter 你说的这种已经被批过,现在的共识就是语义化。语义化正确,专用阅读器可以做出优化,可用性更高。

#12 楼 @Rei 我跟佩服你学的每一个知识点都很扎实,其实我没做过功课。

22 楼 已删除

#20 楼 @Rei 你俩不要较劲了,能不能告诉我这些知识从哪里学习?

#20 楼 @Rei 没错,我 2006 年就批那些用表格的,因为那时国外都是 div 了,国内门户都还在用 Table 排版。

但我现在看开了,这些表面工作,有的话更好,没有也就那回事,你看看天涯,还有国外的 mitbbs, powerapple,甚至是微信里面大家转载的心灵鸡汤,那个挨得起批,我觉得最重要的是内容,是推广。

楼主不用纠结了,前台可以漂亮点,但后台真的不重要,功能实现了就行。

我也很佩服@Rei。建议使用 HTML5 布局或者

布局,现在很少有人还用 table 布局。

#23 楼 @zhangyanan 看过很多很杂的资料,缺啥补啥。

#17 楼 @zhangyanan 我在 #11 楼 是纯开玩笑的,千万不要当真。详细的说明 #12 楼 很认真地回答了你,请放心选用。

#24 楼 @Peter 做布局时,div vs table 绝对不是心灵鸡汤或者开发者强迫症。在语义化和响应式如此重要的今天,table 布局是不能完成需要的页面的,所以这变成一个能不能搞定事情的选择了。

另外,我想说 table 布局在绝大多数情况下,需要耗费比 div 布局更多的时间。很多历史遗留项目是因为当时的远古浏览器对 div 布局和 css 标准支持不佳而已,现在早已没有这些问题了。

你提到的,技术 vs 内容 vs 营销,那就是另一个话题的,我同意技术以外的部分对网站来说同等重要,但是这和技术选型关系不大,不是说用 div 布局就不能去做好内容或者营销的事情了。

什么 div / table 用 Bootstrap 忘了么?

用 table,现在流行复古风。

#29 楼 @kgen 根据楼主问的问题推测,他网站前台不可能用 Table 排版,但后台自由度大一点,我猜他应该更倾向 Table 和 iframe,如果 div 用得好,那他根本不会来问了。

如果这时候,我告诉他用 div,我觉得他折腾的时间会相当长,他都要用 iframe 和 table 了,想必有个左边栏竖菜单,右边是各个菜单的内容。如果内容简单, 比如只有标签和 input,simple_form 可以全自动搞定,他不会有这个问题。可能后台涉及到的内容或说明比较多,要把这么多内容漂漂亮亮地组织在一起,实在是没有把握,用 Table 从直觉上应该比较简单。

div 的知识如果搞明白了,调个网页跟流水线拧螺丝没什么区别,就是要多些耐心,多些时间。如果他这个项目成功了,再回去改成 div 的也不难,但如果是个拍脑袋的点子,结果流产了,那花时间一个 px 一个 px 调的模板就是浪费时间了,还不如用来投资学点别的,哪怕是休息也好。

我觉得楼主是个类似全栈工程师的身份,他的工作应该有侧重,后端技术很容易长进,但前端不可能一蹴而就,所以建议实现了再说,推广了再说,后台丑点只有自己看,不要在这个节骨眼上犹豫是上清华还是北大,是蒸着吃还是煮着吃。

你说的语义化和响应式对前端重要,对后台我觉得没那么重要,因为没有蜘蛛和盲人访问你的后台,你的产品也不是 Discuz,要发布源码给大家鉴赏,另外,对于复杂的后台(不是两列式),用响应式变成手机页面,基本也是很难看,还不如两个手指放大来得简单直观。

不过话说回来,在 Rails 里面用上了 Bootstrap,再加上 simple_form 之类的,基本上用不着 div 也用不着 table 了。

34 楼 已删除

#33 楼 @Peter

如果 div 用得好,那他根本不会来问了。

嗯,你这个思路很赞,我的确忽略了这一点。

纠结个 P 啊 能先去做么。

#33 楼 @Peter 你孜孜不倦要把人往坑里引让我很无语。

#37 楼 @Rei

其实我想说的是 Do the right thing or do the thing right?

对新人尤其是这样,你要让人样样通样样行,短期是绝对不可能的。他擅长什么就让他用什么,先做出来了再改善。

花一两个月学 div,用 div, 并解决跨浏览器问题 花二天完成后台,立马上线,然后再学习,并更新产品 上面两咱情况,哪个是坑,还真说不准。

我再重申一次,我绝对是 CSS + DIV 的支持者,我个人不会用 Table,但如果有人用 Table 趁手,我不会说他,告诉他这有个更好的方式 ,有空再去学。

http://cn.linguee.com/%E4%B8%AD%E6%96%87-%E8%8B%B1%E8%AF%AD/search?source=auto&query=do 这个 php 页面前台都是 Table,没有响应式布局,人家一个月至少几十万欧入帐,你不能说你不用 div,不应该成为一个成功的 Businiss,只能说你有改进的空间,我相信他们也会改进,但他们觉得不是现在,他们现在在疯狂地扩张更多的语言,加入更多的服务器采集新语料,在 SEO 上投入更多的精力。

做事有轻重缓急,我想说的仅此而已。

#38 楼 @Peter 楼主就是问 div / table / iframe 应该用哪个做布局,你脑补这么多背景干什么?将来再学,将来是什么时候?提问贴不是你的忏悔室,新人没义务回顾你走的弯路。

#30 楼 @mystery 有道理。http://getbootstrap.com/ 既能快速搭建页面,又能学习应该用什么元素做布局。

#40 楼 @Rei 你是一本好教参,能给出标准答案,但一个好的老师会审时度势,因材施教。

就此结帖,我不会再参与讨论了。楼主你还是用 div 吧,你说得也不多,可能也不是很急,看你个人信息,好像还在学习阶段,有时间多学点东西总是好的,艺多不压身。

我可以小声说现在连 div 都过时了么 :) 现在流行写 section, 写有意义的 xml tags。

哈哈,后台怎么可以用 iframe 呢,应该用 frameset 左右分栏。后台显示数据列表的时候当然是 table 了,table 就是专业干这活的。div 用在布局和非列表的地方。

这个没必要太考究,如果真去较真的话,w3c 标准本身就有很多不合理的地方,html5 是套失败的方案!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号