<2008年4月>
日一二三四五六
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

与我联系

搜索

 

我参加的小组

我参与的团队

随笔档案(15)

收藏夹(4)

最新随笔

积分与排名

  • 积分 - 29646
  • 排名 - 1572

最新评论

阅读排行榜

css+div 布局（1）- css+div实现table布局

css+div实现table布局

css代码

<style>
.table/*div table container*/
{



/*width:770px;*/
}
.row div/*div row cell*/
{
display:inline;
width:240px;
border-top:1px solid  #C1BBAB;
border-left:1px solid #C1BBAB;
}
.header div/*div header cell*/
{
display:inline;
width:240px;
border-top:1px solid  #C1BBAB;
border-left:1px solid #C1BBAB;
text-align:center;
background-color:#E0DDD5;
}
.lastcell/*last cell*/
{
border-right:1px solid #C1BBAB;
}
.header/*div table hearder*/
{
font:bold;
color:navy;
}
.grid_rw1clr div/*cell in grid_rw1clr*/
{
    background-color: #FFFFFF;
}
.grid_rw2clr div/*cell in grid_rw1clr*/
{
    background-color: #F9F8F6;
}
.row
{
font:normal 12px;
}
.lastrow div/*cell in last row*/
{
border-bottom:1px solid #C1BBAB;
}
</style>
对每个cell设置border-left，border-top,这样的单元格拼成行，仅仅缺少最后一格右边框和最后一行的底边框，这些就需要特殊处理，所以另外定义两个class：lastcell和lastrow来处理，最后拼出来的table边框就不会有重叠。
class：grid_rw1clr，grid_rw2clr实现交替色

Css Table效果
header(1,1)
header(1,2)
row(1,1)
row(1,2)
row(2,1)
row(2,2)
Html代码
 <div class="table">
  <div class="header"><div>header(1,1)</div><div class="lastcell">header(1,2)</div></div>
  <div class="row grid_rw1clr"><div>row(1,1)</div><div class="lastcell">row(1,2)</div></div>
  <div class="row grid_rw2clr lastrow"><div>row(2,1)</div><div class="lastcell">row(2,2)</div></div>
</div>

接下来还需要实现：
  • 排序
  • 拖拽
  • 拉伸
Tag标签: css,.net,div,table,layout
posted on 2008-04-12 07:02 Agan@CN 阅读(4438) 评论(48)  编辑 收藏 网摘 所属分类: Asp.Net 、JavaScript 、DHTML 、CSS

FeedBack:
#1楼  2008-04-12 00:03 liong      
好东西 关注
  回复  引用  查看    
#2楼  2008-04-12 01:36 Kingsun      
期待更多的内容.
  回复  引用  查看    
#3楼  2008-04-12 08:07 T2噬菌体      
稍微提点意见，呵呵

标准化布局提倡使用DIV进行元素的布局，但是这并不是说一定要全用DIV，Table标签也是可以用的，只不过要遵循两条原则 1.不能有表现，只能有结构 2.承载的内容应该是表格式内容。即这时Table不再用于布局，而是回归到它本身的用途：呈现表格数据。这也是符合标准化布局的。

所以，我个人认为，如果某地方是要呈现表格数据，与其大费周章用DIV模拟，不如直接用Table就可以了。
  回复  引用  查看    
#4楼  2008-04-12 08:47 李华顺      
这是自我陶醉的做法

  回复  引用  查看    
#5楼  2008-04-12 08:48 ppp [未注册用户]
反对博主使用div+css这个名称。
  回复  引用    
#6楼  2008-04-12 08:49 风之影      
用DIV摆table表格是比较头痛，

  回复  引用  查看    
#7楼  2008-04-12 09:16 狼Robot      
如果row(1,1)中有两行文字,row(1,2)只有一行文字,楼主能让row(1,2)的高度像tabel一样自动等于row(1,1)的高度吗?楼主有考虑过实现Tabel的colspan和rowspan吗?
  回复  引用  查看    
#8楼  2008-04-12 09:31 暗香浮动      
@T2噬菌体
zan cheng
  回复  引用  查看    
#9楼  2008-04-12 09:48 Jerry C.      
期待后续的。
  回复  引用  查看    
#10楼  2008-04-12 09:56 李战      
乱世出英雄，俺又多学一招，管他正统还是邪门。
  回复  引用  查看    
#11楼  2008-04-12 10:12 SZW      
@T2噬菌体
同意你的看法，不过这种做法也有可取之处——在IE核心的浏览器中，浏览器会等待</table>标签载入后一起显示全部内容（FireFox好像进行了改善），当table内容过多时，演示就会延时，而用div不会出现这类问题，可以使客户体验得到改善。
  回复  引用  查看    
#12楼  2008-04-12 10:19 偶卖糕的      
严重违反w3c标准，即使你不想用table展现，也应该用ul之类的标签！
还有楼上的，你觉得一个table能有多大呢？
  回复  引用  查看    
#13楼  2008-04-12 10:32 SZW      
@偶卖糕的
你说得我也同意，但是table在这方面的缺陷是客观存在的，我是说这种用不用延时的标签替换table的思路还是有可取之处的。table多“大”要看你什么地方用和客户端的速度如何了，很多时候这个问题是程序员左右不了的。
  回复  引用  查看    
#14楼  2008-04-12 10:40 T2噬菌体      
这个实现代码有致命的问题，在FireFox中无法正常现实，不信各位试试。建议楼主在做标准化布局时一定要考虑到跨浏览器的问题
  回复  引用  查看    
#15楼  2008-04-12 10:41 brightwang      
只说一句，用table做的表格都可以用ul、li来实现，用table的唯一好处是写页面的时候方便点，兼容性的问题少些，如果前台有点水平的话根本就可以把table扔了，这样后台就可以纯粹使用repeater。
  回复  引用  查看    
#16楼  2008-04-12 10:59 梁逸晨      
我没有看到table，也没有看到div，我看见的是两个极端。
  回复  引用  查看    
#17楼  2008-04-12 11:00 ganxcong [未注册用户]
@T2噬菌体
赞同你的意见
  回复  引用    
#18楼  2008-04-12 11:06 为妙      
学习
  回复  引用  查看    
#19楼  2008-04-12 12:06 www.mmic.net.cn [未注册用户]
不错的~！！！！！
  回复  引用    
#20楼  2008-04-12 12:13 ppp [未注册用户]
如果你要给用户显示一个表格，那就应该用table。

这种替代方案毫无意义。
  回复  引用    
#21楼  2008-04-12 12:19 李涛      
其实完全不必要这么做，虽然div符合web标准,但是不能滥用,过度div其实并不会带来效率和简洁,实现一个表,一个table足以。
  回复  引用  查看    
#22楼  2008-04-12 12:52 金色海洋（jyk）      
请测试一下性能。
比如100行，50列的这样的表格，全部显示出来需要多长的时间，cpu、内存的占用率如何？低配置的电脑又会如何？
  回复  引用  查看    
#23楼  2008-04-12 12:55 allenle [未注册用户]
我使用的是Firefox3浏览的本页，但似乎没有看到表格的样式。表格的内容行和表头没有对齐。
  回复  引用    
#24楼  2008-04-12 13:17 Freewind      
感觉有点滥用Div
和我一个同事有点像, 明明就是一个表格,非要用Div来做,自已又做不来,天天问这问那的,整天把Div+Css挂嘴边,烦....
  回复  引用  查看    
#25楼  2008-04-12 14:13 Yok      
表格要用table
  回复  引用  查看    
#26楼  2008-04-12 16:58 Leem      
呵呵,确实有点过了,如果说博主是出于说明div也能实现table效果,那倒还是可以接受的.
  回复  引用  查看    
#27楼  2008-04-12 17:38 阿武      
firefox下有问题啊,LZ
  回复  引用  查看    
#28楼  2008-04-12 17:58 Junstyle      
div也太多了点吧，遵循标准也不是表示全部要用div来布局，实际需求了
  回复  引用  查看    
#29楼  2008-04-12 18:24 落花人独立      
我觉得怎么好用怎么来，在表单的布局的时候采用Table可以说是十分省事的，如果采用DIV和其它的元素又不知道要消耗多少时间。Table是用来表现数据的不错，有时候用一下来布局也是省心省力的。DIV的布局能力用来控制大的方面还是不错的，如果小的细节也用它来实现就有些事得其反。我们想要做到的就是使页面的体积小一点，看着简洁一点，干净一点，这样就容易把控。如果过度的使用了DIV就会造成页面的混乱，相反对于Table的适当使用却可以起到很好的效果。个人拙见。
  回复  引用  查看    
#30楼  2008-04-12 21:21 landylee2008 [未注册用户]
很好啊，认识了div
  回复  引用    
#31楼  2008-04-12 21:27 留恋星空      
hehe 好热闹喔。交流是最终目的，火气是不是太大了点啊，各位？
  回复  引用  查看    
#32楼  2008-04-12 23:06 退尽浮华，尽显本色      
值得参考
  回复  引用  查看    
#33楼  2008-04-12 23:20 Think Tips      
  1. 如果单纯的展示数据的话，用table就好了，本来table就是干这个的
  2. 貌似很多人在走极端，以前是连环套连环的table，现在又是全部div
  3. DIV+CSS本身就是错误的说话，布局不一定一定要用div，还有ul、li，span等很多可以用


  回复  引用  查看    
#34楼  2008-04-13 11:59 Tristan(Guozhijian)      
全部都div缺少层次感吧
  回复  引用  查看    
#35楼 [楼主] 2008-04-13 18:39 Agan@CN      
@T2噬菌体
谢谢，说的很好。
  回复  引用  查看    
#36楼 [楼主] 2008-04-13 18:45 Agan@CN      
@狼Robot
div用来布局，不是说要替代table，就像T2噬菌体说的那样，table用来表现数据结构
  回复  引用  查看    
#37楼  2008-04-14 08:28 syuko——驿路梨花      
个人感觉用DIV完全替代Table没有必要，有时候用Table方便就应该去用，而不应该说有个标准在哪里就不用。
  回复  引用  查看    
#38楼  2008-04-14 08:44 swordzhang      
--引用--------------------------------------------------
syuko——驿路梨花: 个人感觉用DIV完全替代Table没有必要，有时候用Table方便就应该去用，而不应该说有个标准在哪里就不用。
--------------------------------------------------------
支持，什么都视需要而定嘛，没有那种最完美的东西滴

  回复  引用  查看    
#39楼  2008-04-14 13:21 sekihin      
严重关注中
  回复  引用  查看    
#40楼  2008-04-14 13:52 looping      
没必要。。。
  回复  引用  查看    
#41楼  2008-04-14 16:45 tianyamoon      
楼主别开蹊径，大家何必如此打击，提出了方法各位愿意用不愿意用，或者用到用不到，自己看着办不就行了。何必如此打击楼主。我支持楼主啊。
  回复  引用  查看    
#42楼 [楼主] 2008-04-14 20:18 Agan@CN      
@tianyamoon
moon，谢谢支持！海纳百川的胸怀值得钦佩。
  回复  引用  查看    
#43楼  2008-04-15 08:41 蚊子      
用div来实现table布局,我是有意见了.我是W3C的标准者,不是div迷.每个标签都它的意义,我们应该安情况使用.
  回复  引用  查看    
#44楼  2008-04-17 21:34 王孟军!      
支持
我对样式比较菜鸟,请多指教
  回复  引用  查看    
#45楼 [楼主] 2008-04-18 08:10 Agan@CN      
@王孟军!
呵呵，铁头吧，共同学习。
  回复  引用  查看    
#46楼  2008-04-26 06:55 路过的 [未注册用户]
其实对于大的布局还是建议使用div+css来做
这样对速度很好
不过小的细节就没有必要用div了
用个表格即省事有方便嘛
  回复  引用    
#47楼  2008-07-09 14:16 luffer [未注册用户]
没觉得用了DIV后布局就怎么明朗，简约
其实表格也好，DIV也好，要看编程者的习惯，否则，习惯用不来，再好的东西也是多余。
  回复  引用    
#48楼  2008-09-26 12:02 whlalhj [未注册用户]
ff浏览器下有问题 换到ie里才看到效果

  回复  引用    

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-04-17 20:47 编辑过
Google站内搜索

China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！
开发者征途系统新作：《设计模式——基于C#的工程化实现及扩展》



相关文章:


相关搜索:
css .net div table layout

相关链接: