很奇怪 为什么V2EX 还在用 table 布局?

是因为 table 从语义上来讲，是为了数据展示的。一味用其他元素来代替 table 从而彰显 web2.0 其实是不正确的。

table 有什么错

可以举个例子用在哪里么？这个要视情景来说。
如果为了布局用table自然不合适（除了Email模板，那个无解）。

@shinwood 页面要语义化才ok...

table 就像你说的,我只用在列表数据了...

除非你们觉得 首页的列表也算数据展示...

@tension 一般意义上来说，帖子列表称得上是数据展示，可参考 Discuz! 和 phpwind 的帖子列表。v2ex 用了每一个帖子一个 table 标签而不是一个 tr，可以避免 table 只有在下载完成才显示的缺点。

这让我想起 以前经典论坛的月经贴。 23333

Table无罪

唔。。。因为livid只会用table，哇咔咔。。。

@shinwood 赞

在该用table的地方用table并没有错吧。

很奇怪楼主会奇怪V2EX用table布局。。。

table干该干的货。。。。。。。

本身一个表格标签，非要去拿DIV来实现 不是有点蛋痛么。。。。

说table布局那是整个网页就是个大table那种
v2ex只是把table放在数据展示上

@tension 当年设想让 Web 变得语意化的那帮人，没有料到现在的跨数据源之间交互的事实标准是 JSON（看看 Google Glass 的 API 的设计吧）。而 JSON 为什么胜过 XML，因为简单。

尽可能用最简单的方案去实现,不要为了单纯的彰显所谓技术而堆叠复杂的东西.

了解...

谢谢各位解答!

这个布局用 table 方便呈现，并不会影响性能；使用 div 需要定义更多的 CSS 样式，反而拖慢了性能。

请问 fr fl sep10 等等这些用法有什么好处吗？ 之前从来没这么写过，也没见鬼佬这么写过，多是算好 margin padding

@tension 乱入一下,LZ你的公司官网那个企业型7G虚拟主机的流量是不是错了?

<td width="48" valign="top" align="center"></td>……
各种td里有 HTML样式属性……

看了下源码，明明是一个列表非要用table来做，搞的html和css一团乱麻，我是不怎么喜欢。

因为这就是一个 table 啊

@tension
看了下源码，的确这个列表内容并不是表格型数据，不适合用table来实现。
不同意楼上说的，一切怎么简单怎么来。

@chemzqm 的确是 table 用的好多，本来边距就应该用 margin 来表示，但这里就成了一个定宽的 td，的确不怎么好看，也不好读，而且标签好乱。
不过咱们只是用，写的人不是咱们，用着舒服就行。

每一项都是一个 <table>，确实是蛮奇怪的实现方式，我觉得

一个权衡的问题吧。。。

table 把控起来比较容易。缺点是内容复杂了之后，不借助工具都完全看不懂 html 代码了，记得我上学的时候做网页，不用 dreamweaver 都根本没法定位眼睛看到的元素在代码的哪个位置，而且即便有 dreamweaver 也不是所见所得的，总是歪歪扭扭，当时设计就是以最终浏览器上的效果为准。

用 div/css 什么的，优点就是看的方便，维护的时候能省点力气，能一下子看懂。但是缺点是需要相对专业 css 基础知识，否则根本玩不转。

你孩子的高烧好些了嘛？

主要的原因就是 @Livid 不会写 HTML ，他以前承认过，现在又不承认了，不知道为什么

@yetone 以前不会现在会了啊……
→ →

TABLE是兼容性最好的。

@mongodb 记得在以前的某个帖子中他说过自己对这一方面不太熟悉，所以现在还用 table 布局。

我不觉得主题列表里的每一个条目用一个 table 是「在干 <table> 应该干的事」。我不反对上面各位「<table> 应该用来展示表格，不应该排斥」的出发点，但是在这个地方用 <table> 并不合语义。

而且就目前这种布局，个人认为没有太多兼容性隐患。<table> 兼容性好不是理由，V2EXer 会用 IE6-7 这种浏览器吗？

我们虽然没理由要求 Livid 把 V2EX 的每一处都做得尽善尽美，但 <td width="10"></td> 这样的代码用来实现样式布局，怎么解释都是说不合理的。

@Wowbeing 高烧已经好了,谢谢关心!

@Sivan 同意。
对于上面很多人的说法，如果观点是“Table应该用来展示表格型数据”，那当然没问题，只是需要讨论一下列表里一个条目是否是表格型数据。

为了兼容性或者节省时间，这样是可以接受的，但“怎么简单怎么来，看起来效果有了就好” 显然不是应该推崇的态度吧~
用合适的标签标记合适的内容，再用CSS来呈现它的外观和布局，不是正确的做法么？

『我大部分工作时间，在做的都是后端程序和服务器相关的那些，对于 Ajax 和 CSS/HTML 等，V2EX 上比我厉害的人太多了。这也是很多人奇怪为什么目前代码中还会有 table 的原因，因为我真的不是前端专家。』


@Livid 的原话

/t/36889

@Livid div的列表：
http://jsbin.com/ucikol/1
相对优雅一点

@passluo 对，就是这个。

@chemzqm http://rabelapp.com/

首页布局我记得是我做的...

我现在都想回归dreamweaver 呢

@jamiesun 我已经不习惯dreamweaver了...手写很多年了, 写代码的时候 表格布局已经在我脑海里了!

@tension 脑海里的引擎trident还是webkit还是gecko？

@Ricepig 哈哈哈, 引擎到木有... 只有布局!

就象奇怪一个小白程序员怎么用百毒搜索一些技术issue一样，最后你会发现原来是他不会翻墙，或者赚麻烦，跟搜索本身没多少关系，这是个社会工程学问题

@tension 不常写页面，每次做页面，都得找来参考手册翻，太累。

@tension 盒模型不一样，布局就不一样，娃哈哈

能满足需求的技术就是好技术

话说这个问题比较蛋疼，特意看了一下源码，布局上没有用表格，只是显示数据的时候用了

嗨。。 何必认真呢

@Livid 我说的不是标签，而是标签属性，结果与表现未分离……不纠结，纯div又怎样，有些特定时候不考虑可访问性，SEO……可维护就行了

@Livid 打错，结构与表现的分离，好吧，可能td width="48"这一结构是特定的，模板里修改也不难……

@ytzong @bitsmix 你们为什么是这种态度？谁也没有责怪不正确的用法，但是不能推崇它吧？

这个问题一直没敢问啊。。。

table无罪，使用者之罪，言之罪啊。
为了驳斥一味反对table而盲目的为table正名，更是。。

所谓语义化，所谓该干的事，只有一句呵呵后了，呵呵。

这里难道不是一个名叫 V2EX 的 table 吗？

@botao1 你去翻我发帖纪录看我吐槽过多少次这个事情而livid回复过几次你就知道为什么现在我是一个这样的态度了

@deathfang 说的是属性，不知道 @Livid 为何要扯到"纯div"。而我也认为，width这种很显然是表现层的东西，不应该放在属性里

另外，也没有"纯div"这种说法。大多数标签都有其特定的语义。纯div或者纯table在我看来都是一种不可取的极端

其实大家的讨论都忽略了语义化带来的好处之一，就是盲人更容易识别其中的内容。@Livid说到JSON ,作为一种纯程序间交互的格式，确实很方便。但是如果有人参与其中，而不是纯粹的程序交互，那JSON并不是一个很好的显示源，因为它缺乏一个描述文件。这就是为什么我们还在用HTML来显示内容，而不是直接打印一个JSON字符串出来让大家浏览。JSON在绝大多数涉及终端用户的环境下只是一个中间数据，它最后必定要转换成其他更适合显示到终端设备的格式，HTML或Native UI。所以在这里讨论JSON完全是Off topic

@botao1 +1 我也不支持那种"怎么简单怎么来"的态度

各位,这是一个很休闲的讨论,茶前饭后 无聊的时候发现的...
只是让我觉得吧 table的布局再我看来一般会用在 数据列表

我所谓的数据列表就是 比如 会员信息 ,支付记录 那种地方...

然后 就没有然后了!

@chenz 如果我有更多的时间来充分考虑的话，我当然愿意尝试其他的写法。

但是问题是真的没有那么多时间。

而且，我有两个问题想和你稍微讨论一下：

1. V2EX 的主要访问者是程序员和设计师，做这两个职业并且对 V2EX 有高度依赖的盲人用户，我们恐怕真的没有。所以，我真的不觉得应该为不存在的需求去做假设和花时间。

2. 在我理解，语意化的好处之一是让网页本身可以直接变成数据，从而更方便数据交互。但问题是，现在的数据交互都是通过 JSON API 这样的格式，有哪个大型网站是在依赖网页本身做数据交互？

所以，我承认，V2EX 的 markup 在写的时候的想法是这样的：

1. 先用最简单的写法写出我想要的基本布局。

2. 加上 CSS 修饰。

3. 调整细节。

于是一切可以很快的进行，很快的上线，同时，也在未来，为某些同学提供找到优越感的地方。:-)

@Livid “当年设想让 Web 变得语意化的那帮人，没有料到现在的跨数据源之间交互的事实标准是 JSON”
我觉得你这里本身理解就有误了，数据源和语义应该是2个不同的概念。
数据源最终还是要填入有语义的标签容器类内……

@Livid 比如这里，http://yuilibrary.com/yui/docs/tabview/tabview-yql.html
组件JS生成HTML，跨数据源时保持语义标签+WAI-ARIA无障碍属性

似乎很多程序员看不上前端，然道是觉得太简单不想浪费生命在这上面？
只要说没时间就可以了。

@deathfang 好吧，那我们来讨论点实际的事情，你觉得 V2EX 这个网站的前端应该怎么改？改完之后有什么好处？

好吧 @Livid 的初衷都是一个好的方向,我认同...

@Livid 不知道站长，网站的流量烧不烧钱，从实用角度上来讲，table改不改都无所谓。

@P233 CSS样式只需要加载一次，就会缓存下来，用table会让每个网页，每条信息多很多冗余的table相关的标签，从而加大网页整体体积。

但是做了那么久的前端，感觉，纠结什么语义化的东东，简直是操蛋，产品能用，好用，实用才是硬道理！！！其他的都是浮云。:)

其实我觉得语义化这个东西算是完美主义的特征，要说具体对产品有多么大的意义，也说不上来，最多挤出一些SEO优化、无样式访问啥啥的。
但从节省流量的角度来说，尽量减少html属性，改为样式控制，实际好处还是诸多的。@Livid

@Livid 如你所述，V2EX在这个地方这么做我完全理解。只是不同意有些回复者类似”语义化毫无意义“的观点。

@fiture 语义化的标签，良好的命名规范，首先是会降低开发者维护和更新的成本，实际上也最终会影响用户的“好用“。比如加载速度，SEO，第三方工具对内容的提取和优化（混乱或者错误的标签，让Evernote,Readability 这些工具不能正确地工作吧）。

我不是职业做前端的也许不能体会你的某些开发痛苦，可是不觉得使用语义化的标签，是一种”操蛋“的事情，或是仅仅满足自己的优越感。良好的标签意义深远。

@TerranC V2EX 的首页在打开 nginx 的主动 gzip 压缩之后，是控制在 14 KB 以内的。换一种写法，加上一堆 CSS 去实现本来用一些很简单的 markup 就可以实现的效果，未必能让页面更少，没准还会让开发更慢。

@Livid 经验尚浅，无法全局考虑问题，仅从前端角度考虑，
改版的话可以考虑响应式布局，适配手机等移动设备，很多个人blog都这样做了
Chrome设置UA看http://stackoverflow.com/ 也是未做手机适配，显示效果只是缩放

@deathfang 我们现在已经适配手机了啊？而且为手机配置的是专用的另外一套模板，比桌面版小很多。

@deathfang

@Livid 恩，要算gzip压缩后有多大的区别，肯定都不大。至于开发速度，这个就确实因人而异了，看个人习惯。反正作为普通用户不care这些，没看这主题的话，我天真的认为不会是table，呵呵。

@Livid 大方点承认自己在前端方面并不擅长，很难吗？

@cmonday 长点眼睛好不？在这个页面上 CMD+F 一下 承认，你到底想怎样？

响应式布局只需要一套模板不同样式实现

我理解的很多前端的技术直接的实际意义大概都是开发效率 维护性吧

@Livid 我只看到你“承认”了一下自己写布局的方式，而且有点以此为荣的意思，和我说的并不一样吧？
v2ex在前端上并不是一个好的典范。我觉得这个贴给了很多前端新人一个很大的误导。
如果你把这叫做找优越感，那我无话可说。

@cmonday 我什么时候要当什么典范了？这种神逻辑是你自己想出来的吧？

@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.

@gDD 我从来没有在任何场合谈论过 V2EX 的前端，这方面我不是专家，我也没特别大的兴趣，我只是想尽快做出自己想要的效果。

这个网站上有很多各方面的专家，如果你们都要拿自己最擅长的赖以谋生的技能来我这里找一下优越感的话，那就尽管找好了。反正，开了这个网站，不就是为了让大家有个消遣的地方么？

:-)

@Livid 你没有表达过这个意思，但是这里很多人默认把你和你做的网站当典范。上面很多人不是说吗，在这里用table就是好，就是该用。有的人说应该更加语义化，或者应当结构与样式分离，就被说成是为了彰显技术而做。
还有，有必要发这么大脾气吗？

@cmonday 我再说一遍，这些什么被当成典范的神逻辑是你自己臆想出来的。我只是觉得你这些逻辑莫名其妙。

@Livid 回一句我喜欢，争论就没必要了。
@cmonday 他爱咋怎就咋整，无法要求。

Google首页搜索框结构，谁给解释下这样的好处?

<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> &nbsp; &nbsp; &nbsp; <a href="#;" Onclick="thankReply(623627, 'dnnhscqsqrjsxyekjqrhrjhwtdhfikbo');" class="thank">感谢回复者</a></div> &nbsp; <a href="#;" Onclick="replyOne('tension');"><img src="http://static.v2ex.com/static/img/reply.png" align="absmiddle" border="0" alt="Reply" /></a> &nbsp;&nbsp; <span class="no">4</span></div>
<div class="sep3"></div>
<strong><a href="/member/tension" class="dark">tension</a></strong>&nbsp; &nbsp;<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>

@botao1 我的观点是过分较真语义化结构，是一种操蛋，而且我也并未赞同V2EX用评论，信息流用table布局的做法，并强调产品的能用，好用，实用，才是我们最求的最终目的。

算了，我还是忽略这个主题吧。

好热闹，围观。

人家明明是用div布局（cell item），table在显示数据，这人真操蛋

@veraucio 不要告诉我这是真的。好吧，看了一下，还真是table。
那一定是有用意的了，求大神告知

@fiture 谢谢回复，我分别测试了 1000 个 tables，divs，lis，只写了最基本的样式，性能几乎没有差别，奇怪的是 tables 文件多了 200k，google page speed 得分却最高。这个测试没有任何理论基础，自己瞎玩的。

个人很不擅长横向一列一列的布局，觉得用 div 要考虑很多边距浮动等因素，用 tables 方便很多。坚持使用浏览器原生支持的，现在也不用 CSSreset。

另外，确实不太能接受 fr fl sep10 这种用法。

这只是我学习前端知识的一个阶段性经验与总结。

@deathfang stackoverflow是有手机适配的页面的……经常用手机上。

没有时间改，或者说现在运行得挺好，不用改，这么解释大家会理解的，用不着掰那么多理由吧

@skydiver 抱歉，是我表达有误，我想说的是 Chrome设置手机设备的UA查看页面是否适配。不过这只能算尝试性建议。
响应式布局，一个网站能够兼容多个终端而不是为每个终端做一个特定的版本

引用：http://ued.taobao.com/blog/2012/04/responsive-webui-design-and-develop/
响应式设计听起来非常理想，但其技术实现则困难重重，因为响应式设计并不仅仅包含设计本身，还包含实现，更进一步讲，实现原理固然简单，但要考虑到开发成本、性能、可维护性方面则又是充满了挑战

如果保证语义化， 但是喜欢table的布局方式 可以用 display: table

其实我就是好奇,真不好意思让大家这样争先恐后的讨论...

好了好了别吵了。。老大发火了。

从为什么 id0 这样做变成了以技术的掩护纯抬杠，你们太没品了。

第 100 回复也是我的！！