关于使用DIV替代Table的一些尝试

社区网站要改版了，为了体现新版的技术实力，我们计划布局全部使用DIV+CSS构建，其中最重要的替代就是Table表格了。

为了测试DIV+CSS真的能达到目的，偶今晚（不，应该说今儿早上）做了基于PW 5.3的一个论坛主页，通过一晚上的工作，终于完成了首页部分全DIV的布局，这包括了两种常用表格布局

1. 一种是纵向布局：每个板块儿按纵向排列，不限制显示的列数，大多数论坛常用此布局。
2. 另一种是横向布局：每列显示N个板块儿，显示个数可以在后台修改，此布局常用于特定事务（如产品具体型号及班级等）的讨论。

演示地址：http://www.9xyz.com/index.php （该站目前只作技术研究，没有任何内容及广告成分，而且只有首页实现了全部DIV，其他页都没做，访问也没啥用）

大家有需要的，就参考一下吧。：）

评论

11 楼 sp42 2007-01-29  

Physon 写道

结构化、语意化才是正道, 为了 div 而 div 是不足取的. 而且, 把本该属于 table 的工作 - 呈现数据列表 - 交给别的组件本身就是错误的.

当然, 用来练手另当别论.

同感
同样道理，当初用TABLE来排版，本身就是一种错位。
"table"表格，天生就是用来展示数据的二维、或三维的关系。

10 楼 icefire 2007-01-29  

Table显示数据
DIV布局
简单数据可以用UL列表这东西

9 楼 Physon 2007-01-29  

结构化、语意化才是正道, 为了 div 而 div 是不足取的. 而且, 把本该属于 table 的工作 - 呈现数据列表 - 交给别的组件本身就是错误的.

当然, 用来练手另当别论.

8 楼 jfy3d 2007-01-28  

"一般的做法就是把它们直接嵌入到网页中"
反而又导致了维护问题

7 楼 netfishx 2007-01-28  

最重要的一点，table就是一个数据表格。你硬要它去做布局的工作就是不对，将来维护或者需要有页面ui操作的时候就知道痛苦了。

6 楼 yipsilon 2007-01-28  

把CSS作为外连文件来做的话，一旦CSS文件没有加载，那页面的可读性确实很差，例如Windows Live Mail在最近这段时间的表现。所以目如果页面非常依赖CSS，那一般的做法就是把它们直接嵌入到网页中。

我这边用DIV代替Table主要是为了动态排版的方便，例如把表数据从横向显示变成纵向显示，那如果使用Table的话，就得写程序来重新生成了。而使用DIV，只需要修改布局样式即可，这是非常方便的。

这样做确实导致了工作量的加大，而且技术门槛提高了不少，但如果项目作成后，对于维护来说，能减轻后台开发人员很大地负担。起码很多页面细节不需要写代码来实现，尤其是表数据这块儿。

目前来说，为了让开发人员有个过渡，只能一点点地来进行培训和体验，而此次试验的目的就是验证DIV是否可以替代Table的可行性，现在看来，基本上达到我的需要，而且令我惊讶的是，它对于布局的控制非常灵活，远远超过了Table的功能。

5 楼 downpour 2007-01-28  

什么叫用DIV替代Table，在没有理解网页和网页布局的概念的情况下去搞这个事情只能是加大工作量，而且没有任何意义。

网页最最本质的东西是可读。借助工具，在你的网页失去CSS的时候，你看看你的网页是否能像一个文档一样可读，这才是网页设计的灵魂。仅仅使用div来替换原来的table布局不过是换汤不换药而已。

4 楼 daoger 2007-01-28  

自己现在一般还是用table，感觉它在细小部位的控制上要比div好一些，特别是在数据的格式话展示方面！但是在灵活控制方面table就不怎么样了；div还是比table有优势！

3 楼 yipsilon 2007-01-28  

感觉div比table的可操作性强很多，table把数据固化了，随之带来的优点是简单是用，而div加上css用起来确实比较困难，一般一天能做一页就不错了，但它的优点是可以灵活布局页面，第二个就是维护性好，一般来说只要修改css样式就可以达到重新排版页面的要求，对程序改动浮动小。

2 楼 aninfeel 2007-01-27  

感觉大家有点以偏概全了，其实div只是在大的布局方面方便而已，小的行列什么的还是table好

1 楼 LucasLee 2007-01-27  

其实我觉得Table挺好用的，只是在某些地方不适用，但有些地方的确很适合。现在的观点有些矫枉过正了。

我的观点是，不要把整个页面用一个大Table就可以了。