这是一个创建于 4206 天前的主题，其中的信息可能已经有所发展或是发生改变。
是为了兼容性 还是?
 |
1
shinwood 2013-05-18 14:27:59 +08:00  3
是因为 table 从语义上来讲，是为了数据展示的。一味用其他元素来代替 table 从而彰显 web2.0 其实是不正确的。
|
 |
2
summic 2013-05-18 14:36:14 +08:00 1
table 有什么错
|
 |
3
botao1 2013-05-18 14:41:59 +08:00 1
可以举个例子用在哪里么？这个要视情景来说。
如果为了布局用table自然不合适（除了Email模板，那个无解）。 |
 |
4
tension OP |
|
5
shinwood 2013-05-18 14:50:54 +08:00 1
@tension 一般意义上来说，帖子列表称得上是数据展示，可参考 Discuz! 和 phpwind 的帖子列表。v2ex 用了每一个帖子一个 table 标签而不是一个 tr，可以避免 table 只有在下载完成才显示的缺点。
|
 |
6
DXpro 2013-05-18 14:57:15 +08:00 1
这让我想起 以前经典论坛的月经贴。 23333
|
 |
7
tomheng 2013-05-18 14:58:53 +08:00 1
Table无罪
|
 |
8
tuoxie007 2013-05-18 15:05:20 +08:00 1
唔。。。因为livid只会用table，哇咔咔。。。
|
 |
10
master 2013-05-18 15:09:48 +08:00 1
在该用table的地方用table并没有错吧。
|
 |
11
zhujinliang 2013-05-18 15:09:54 +08:00 1
很奇怪楼主会奇怪V2EX用table布局。。。
|
 |
12
Kvm 2013-05-18 15:16:20 +08:00 1
table干该干的货。。。。。。。
本身一个表格标签，非要去拿DIV来实现 不是有点蛋痛么。。。。 |
 |
13
cutehalo 2013-05-18 15:17:52 +08:00 1
说table布局那是整个网页就是个大table那种
v2ex只是把table放在数据展示上 |
 |
14
Livid MOD @tension 当年设想让 Web 变得语意化的那帮人，没有料到现在的跨数据源之间交互的事实标准是 JSON（看看 Google Glass 的 API 的设计吧）。而 JSON 为什么胜过 XML，因为简单。
|
 |
15
leiz 2013-05-18 15:26:16 +08:00 2
尽可能用最简单的方案去实现,不要为了单纯的彰显所谓技术而堆叠复杂的东西.
|
|
16
tension OP 了解...
谢谢各位解答! |
 |
17
P233 2013-05-18 15:34:21 +08:00 1
这个布局用 table 方便呈现，并不会影响性能；使用 div 需要定义更多的 CSS 样式，反而拖慢了性能。
请问 fr fl sep10 等等这些用法有什么好处吗？ 之前从来没这么写过，也没见鬼佬这么写过，多是算好 margin padding |
 |
19
deathfang 2013-05-18 15:37:27 +08:00
<td width="48" valign="top" align="center"></td>……
各种td里有 HTML样式属性…… |
 |
21
chemzqm 2013-05-18 15:44:33 +08:00
看了下源码，明明是一个列表非要用table来做，搞的html和css一团乱麻，我是不怎么喜欢。
|
 |
22
Mak 2013-05-18 16:01:24 +08:00
因为这就是一个 table 啊
|
 |
24
greatghoul 2013-05-18 16:06:34 +08:00
@chemzqm 的确是 table 用的好多，本来边距就应该用 margin 来表示，但这里就成了一个定宽的 td，的确不怎么好看，也不好读，而且标签好乱。
不过咱们只是用，写的人不是咱们，用着舒服就行。 |
 |
25
dorentus 2013-05-18 16:22:21 +08:00
每一项都是一个 <table>，确实是蛮奇怪的实现方式，我觉得
|
 |
26
darasion 2013-05-18 16:23:19 +08:00
一个权衡的问题吧。。。
table 把控起来比较容易。缺点是内容复杂了之后，不借助工具都完全看不懂 html 代码了，记得我上学的时候做网页，不用 dreamweaver 都根本没法定位眼睛看到的元素在代码的哪个位置，而且即便有 dreamweaver 也不是所见所得的，总是歪歪扭扭，当时设计就是以最终浏览器上的效果为准。 用 div/css 什么的，优点就是看的方便，维护的时候能省点力气，能一下子看懂。但是缺点是需要相对专业 css 基础知识，否则根本玩不转。 |
 |
27
Wowbeing 2013-05-18 16:25:21 +08:00
你孩子的高烧好些了嘛？
|
 |
30
sohoer 2013-05-18 16:56:20 +08:00
TABLE是兼容性最好的。
|
 |
31
yetone 2013-05-18 16:56:43 +08:00 via Android
@mongodb 记得在以前的某个帖子中他说过自己对这一方面不太熟悉，所以现在还用 table 布局。
|
 |
32
Sivan 2013-05-18 17:12:30 +08:00 2
我不觉得主题列表里的每一个条目用一个 table 是「在干 <table> 应该干的事」。我不反对上面各位「<table> 应该用来展示表格，不应该排斥」的出发点，但是在这个地方用 <table> 并不合语义。
而且就目前这种布局，个人认为没有太多兼容性隐患。<table> 兼容性好不是理由，V2EXer 会用 IE6-7 这种浏览器吗？ 我们虽然没理由要求 Livid 把 V2EX 的每一处都做得尽善尽美，但 <td width="10"></td> 这样的代码用来实现样式布局，怎么解释都是说不合理的。 |
|
34
botao1 2013-05-18 17:41:32 +08:00
@Sivan 同意。
对于上面很多人的说法，如果观点是“Table应该用来展示表格型数据”，那当然没问题，只是需要讨论一下列表里一个条目是否是表格型数据。 为了兼容性或者节省时间，这样是可以接受的，但“怎么简单怎么来，看起来效果有了就好” 显然不是应该推崇的态度吧~ 用合适的标签标记合适的内容，再用CSS来呈现它的外观和布局，不是正确的做法么？ |
 |
35
passluo 2013-05-18 17:57:19 +08:00 via iPad 1
|
|
36
chemzqm 2013-05-18 18:20:27 +08:00
|
|
38
tension OP |
 |
39
jamiesun 2013-05-18 18:47:05 +08:00
我现在都想回归dreamweaver 呢
|
|
40
tension OP @jamiesun 我已经不习惯dreamweaver了...手写很多年了, 写代码的时候 表格布局已经在我脑海里了!
|
 |
43
yakczh 2013-05-18 19:20:56 +08:00
就象奇怪一个小白程序员怎么用百毒搜索一些技术issue一样，最后你会发现原来是他不会翻墙，或者赚麻烦，跟搜索本身没多少关系，这是个社会工程学问题
|
 |
46
ytzong 2013-05-18 19:52:44 +08:00 via iPad
能满足需求的技术就是好技术
|
 |
47
sarices 2013-05-18 20:02:03 +08:00
话说这个问题比较蛋疼，特意看了一下源码，布局上没有用表格，只是显示数据的时候用了
|
 |
48
bitsmix 2013-05-18 20:29:49 +08:00 via iPhone
嗨。。 何必认真呢
|
|
49
deathfang 2013-05-18 21:03:08 +08:00
@Livid 我说的不是标签，而是标签属性，结果与表现未分离……不纠结，纯div又怎样，有些特定时候不考虑可访问性，SEO……可维护就行了
|
 |
52
momou 2013-05-18 22:24:52 +08:00
这个问题一直没敢问啊。。。
|
 |
53
Feobe 2013-05-18 23:45:55 +08:00
table无罪，使用者之罪，言之罪啊。
为了驳斥一味反对table而盲目的为table正名，更是。。 所谓语义化，所谓该干的事，只有一句呵呵后了，呵呵。 |
 |
54
LokiSharp 2013-05-19 00:56:22 +08:00
这里难道不是一个名叫 V2EX 的 table 吗？
|
|
55
bitsmix 2013-05-19 01:06:18 +08:00 via iPhone
@botao1 你去翻我发帖纪录看我吐槽过多少次这个事情而livid回复过几次你就知道为什么现在我是一个这样的态度了
|
 |
56
chenz 2013-05-19 01:16:27 +08:00
@deathfang 说的是属性，不知道 @Livid 为何要扯到"纯div"。而我也认为，width这种很显然是表现层的东西，不应该放在属性里
另外，也没有"纯div"这种说法。大多数标签都有其特定的语义。纯div或者纯table在我看来都是一种不可取的极端 其实大家的讨论都忽略了语义化带来的好处之一，就是盲人更容易识别其中的内容。@Livid说到JSON ,作为一种纯程序间交互的格式，确实很方便。但是如果有人参与其中，而不是纯粹的程序交互，那JSON并不是一个很好的显示源，因为它缺乏一个描述文件。这就是为什么我们还在用HTML来显示内容，而不是直接打印一个JSON字符串出来让大家浏览。JSON在绝大多数涉及终端用户的环境下只是一个中间数据，它最后必定要转换成其他更适合显示到终端设备的格式，HTML或Native UI。所以在这里讨论JSON完全是Off topic |
|
58
tension OP 各位,这是一个很休闲的讨论,茶前饭后 无聊的时候发现的...
只是让我觉得吧 table的布局再我看来一般会用在 数据列表 我所谓的数据列表就是 比如 会员信息 ,支付记录 那种地方... 然后 就没有然后了! |
|
59
Livid MOD @chenz 如果我有更多的时间来充分考虑的话，我当然愿意尝试其他的写法。
但是问题是真的没有那么多时间。 而且，我有两个问题想和你稍微讨论一下： 1. V2EX 的主要访问者是程序员和设计师，做这两个职业并且对 V2EX 有高度依赖的盲人用户，我们恐怕真的没有。所以，我真的不觉得应该为不存在的需求去做假设和花时间。 2. 在我理解，语意化的好处之一是让网页本身可以直接变成数据，从而更方便数据交互。但问题是，现在的数据交互都是通过 JSON API 这样的格式，有哪个大型网站是在依赖网页本身做数据交互？ 所以，我承认，V2EX 的 markup 在写的时候的想法是这样的： 1. 先用最简单的写法写出我想要的基本布局。 2. 加上 CSS 修饰。 3. 调整细节。 于是一切可以很快的进行，很快的上线，同时，也在未来，为某些同学提供找到优越感的地方。:-) |
|
60
deathfang 2013-05-19 10:27:12 +08:00
@Livid “当年设想让 Web 变得语意化的那帮人，没有料到现在的跨数据源之间交互的事实标准是 JSON”
我觉得你这里本身理解就有误了，数据源和语义应该是2个不同的概念。 数据源最终还是要填入有语义的标签容器类内…… |
|
61
deathfang 2013-05-19 10:44:03 +08:00
@Livid 比如这里，http://yuilibrary.com/yui/docs/tabview/tabview-yql.html
组件JS生成HTML，跨数据源时保持语义标签+WAI-ARIA无障碍属性 |
 |
62
d8ho 2013-05-19 10:46:20 +08:00
似乎很多程序员看不上前端，然道是觉得太简单不想浪费生命在这上面？
只要说没时间就可以了。 |
 |
66
fiture 2013-05-19 11:45:26 +08:00
@P233 CSS样式只需要加载一次，就会缓存下来，用table会让每个网页，每条信息多很多冗余的table相关的标签，从而加大网页整体体积。
|
|
67
fiture 2013-05-19 11:55:42 +08:00
但是做了那么久的前端，感觉，纠结什么语义化的东东，简直是操蛋，产品能用，好用，实用才是硬道理！！！其他的都是浮云。:)
|
 |
68
TerranC 2013-05-19 12:21:03 +08:00 1
其实我觉得语义化这个东西算是完美主义的特征，要说具体对产品有多么大的意义，也说不上来，最多挤出一些SEO优化、无样式访问啥啥的。
但从节省流量的角度来说，尽量减少html属性，改为样式控制，实际好处还是诸多的。@Livid |
|
69
botao1 2013-05-19 12:21:47 +08:00
|
|
70
Livid MOD @TerranC V2EX 的首页在打开 nginx 的主动 gzip 压缩之后，是控制在 14 KB 以内的。换一种写法，加上一堆 CSS 去实现本来用一些很简单的 markup 就可以实现的效果，未必能让页面更少，没准还会让开发更慢。
|
|
71
deathfang 2013-05-19 12:30:32 +08:00
@Livid 经验尚浅，无法全局考虑问题，仅从前端角度考虑，
改版的话可以考虑响应式布局，适配手机等移动设备，很多个人blog都这样做了 Chrome设置UA看http://stackoverflow.com/ 也是未做手机适配，显示效果只是缩放 |
|
74
TerranC 2013-05-19 12:40:19 +08:00
@Livid 恩，要算gzip压缩后有多大的区别，肯定都不大。至于开发速度，这个就确实因人而异了，看个人习惯。反正作为普通用户不care这些，没看这主题的话，我天真的认为不会是table，呵呵。
|
|
77
deathfang 2013-05-19 12:52:44 +08:00
 响应式布局只需要一套模板不同样式实现 我理解的很多前端的技术直接的实际意义大概都是开发效率 维护性吧 |
 |
78
cmonday 2013-05-19 12:57:22 +08:00
@Livid 我只看到你“承认”了一下自己写布局的方式，而且有点以此为荣的意思，和我说的并不一样吧？
v2ex在前端上并不是一个好的典范。我觉得这个贴给了很多前端新人一个很大的误导。 如果你把这叫做找优越感，那我无话可说。 |
 |
80
gDD 2013-05-19 13:03:16 +08:00
@cmonday You are correct, when I first started to learn Front End, I see something like .sep20 on V2EX, I thought this was awesome, but after some deep learing I found that this is not a common method, and I actually never see this method used on other websites.
Sorry, my Chinese IME is not setup yet. |
|
81
Livid MOD @gDD 我从来没有在任何场合谈论过 V2EX 的前端，这方面我不是专家，我也没特别大的兴趣，我只是想尽快做出自己想要的效果。
这个网站上有很多各方面的专家，如果你们都要拿自己最擅长的赖以谋生的技能来我这里找一下优越感的话，那就尽管找好了。反正，开了这个网站，不就是为了让大家有个消遣的地方么？ :-) |
|
82
cmonday 2013-05-19 13:13:56 +08:00
@Livid 你没有表达过这个意思，但是这里很多人默认把你和你做的网站当典范。上面很多人不是说吗，在这里用table就是好，就是该用。有的人说应该更加语义化，或者应当结构与样式分离，就被说成是为了彰显技术而做。
还有，有必要发这么大脾气吗？ |
 |
85
veraucio 2013-05-19 14:22:58 +08:00
 Google首页搜索框结构，谁给解释下这样的好处? |
 |
86
lfzyx 2013-05-19 14:43:38 +08:00
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr> <td width="48" valign="top" align="center"><img src="http://cdn.v2ex.com/avatar/4ab3/5559/17638_normal.png?m=1367370064" class="avatar" border="0" align="default"auto /></td> <td width="10" valign="top"></td> <td width="auto" valign="top" align="left"><div class="fr"><div id="thank_area_623627" class="thank_area"><a href="#;" onclick="if (confirm('确认要不再显示来自 @tension 的这条回复？')) { ignoreReply(623627, '87589'); }" class="thank" style="color: #ccc;">隐藏</a> <a href="#;" onclick="thankReply(623627, 'dnnhscqsqrjsxyekjqrhrjhwtdhfikbo');" class="thank">感谢回复者</a></div> <a href="#;" onclick="replyOne('tension');"><img src="http://static.v2ex.com/static/img/reply.png" align="absmiddle" border="0" alt="Reply" /></a> <span class="no">4</span></div> <div class="sep3"></div> <strong><a href="/member/tension" class="dark">tension</a></strong> <span class="fade small">23 小时 39 分钟前</span> <div class="sep5"></div> <div class="reply_content">@<a href="/member/shinwood">shinwood</a> 页面要语义化才ok...<br /><br />table 就像你说的,我只用在列表数据了...<br /><br />除非你们觉得 首页的列表也算数据展示...</div> </td> </tr> </table> |
|
87
fiture 2013-05-19 15:36:26 +08:00
@botao1 我的观点是过分较真语义化结构，是一种操蛋，而且我也并未赞同V2EX用评论，信息流用table布局的做法，并强调产品的能用，好用，实用，才是我们最求的最终目的。
|
|
88
fiture 2013-05-19 15:39:17 +08:00
算了，我还是忽略这个主题吧。
|
 |
89
soli 2013-05-19 16:19:19 +08:00
好热闹，围观。
|
 |
90
why 2013-05-19 16:58:17 +08:00
人家明明是用div布局（cell item），table在显示数据，这人真操蛋
|
|
92
P233 2013-05-19 18:57:44 +08:00
@fiture 谢谢回复，我分别测试了 1000 个 tables，divs，lis，只写了最基本的样式，性能几乎没有差别，奇怪的是 tables 文件多了 200k，google page speed 得分却最高。这个测试没有任何理论基础，自己瞎玩的。
个人很不擅长横向一列一列的布局，觉得用 div 要考虑很多边距浮动等因素，用 tables 方便很多。坚持使用浏览器原生支持的，现在也不用 CSSreset。 另外，确实不太能接受 fr fl sep10 这种用法。 这只是我学习前端知识的一个阶段性经验与总结。 |
 |
94
chuck911 2013-05-19 19:33:25 +08:00 via Android
没有时间改，或者说现在运行得挺好，不用改，这么解释大家会理解的，用不着掰那么多理由吧
|
|
95
deathfang 2013-05-19 20:25:06 +08:00
@skydiver 抱歉，是我表达有误，我想说的是 Chrome设置手机设备的UA查看页面是否适配。不过这只能算尝试性建议。
响应式布局，一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本 引用：http://ued.taobao.com/blog/2012/04/responsive-webui-design-and-develop/ 响应式设计听起来非常理想，但其技术实现则困难重重，因为响应式设计并不仅仅包含设计本身，还包含实现，更进一步讲，实现原理固然简单，但要考虑到开发成本、性能、可维护性方面则又是充满了挑战 |
 |
96
hxgdzyuyi 2013-05-19 20:25:40 +08:00
如果保证语义化， 但是喜欢table的布局方式 可以用 display: table
|
|
97
tension OP 其实我就是好奇,真不好意思让大家这样争先恐后的讨论...
|
|
98
bitsmix 2013-05-19 22:30:33 +08:00
好了好了别吵了。。老大发火了。
|
|
99
bitsmix 2013-05-19 22:32:20 +08:00
从为什么 id0 这样做变成了以技术的掩护纯抬杠，你们太没品了。
|
|
100
bitsmix 2013-05-19 22:45:46 +08:00
第 100 回复也是我的！！
|
Select Language