Open Toolbar
关闭导航栏
您现在的位置: 全景之家 >> 网页设计 >> htmlcss技巧 >> 正文

如何用CSS定义表格与模拟表格

作者:rotui    文章来源:蓝色理想    点击数:    更新时间:2006-3-26        

在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用DIV可以模拟出绝大部分以前的表格布局跟数据显示,在后面会讲些代替表格的显示方式.同时,因为找详细的中文介绍.英文的水平又有限.看W3C那介绍~有些地方可能理解错误,如果有发现的朋友请帮忙指出.

[1]表格应用
1表格的基本标签
2分析表格的基本标签
3基本演示
[2]层模拟表格
1模拟前的建议
2两列多行的数据显示
3三列多行的数据显示

表格应用

1、表格的基本标签:

TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

虽然CSS2里可以把别的标签定义得跟table的一样
可是 IE 不支持 所以~应该用表格的地方还是用表格好?
说到表格,自己悄悄的BS一下FF 虽然很不情愿.

2、分析表格的基本标签:

table
table元素定义一个表格的开始
tr
表格中的行
THEAD
表头
TBODY
表的主体
TFOOT
表底
COL
指定基于列的表格默认属性,嵌套的 COL 属性将覆盖 COLGROUP 属性
COLGROUP
指定表格中一列或一组列的默认属性。
TD, TH
单元格
CAPTION
表名

3、基本演示:

不想过多的讲表格,这是一个比较完整的表格的演示,同时继承XHTML的思想,结构与表现的分离,不再为元素的属性做演示


 
 
   
   
   
 
 
 
 
   
     
     
     
     
   
 
 
   
     
     
     
     
   
 
 
   
     
     
     
     
   
   
     
     
     
     
   
    
     
     
     
     
   
   
     
     
     
     
   
 
表名
表头1表头2表头3表头4
表底1表底2表底3表底4
行1列1行1列2行1列3行1列4
行2列1行2列2行2列3行2列4
行3列1行3列2行3列3行3列4
行4列1行4列2行4列3行4列4

无样式表现:

运行代码框

文章录入:lc637    责任编辑:lc637 

推荐图文

· IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2
· 划动门菜单技术
· 网页中常见的斜条纹做法
· 动网论坛(SQL)安装说明
· 服务器应用:IIS建FTP服务器(三)
· 服务器应用:IIS建FTP服务器(二)

| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站地图 | 在线投稿 |