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

2009-12-16 02:21| 发布者: admin| 查看: 32| 评论: 0|原作者: 玄霄

在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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

无样式表现:
运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

表名
表头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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
定义CSS样式:
运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

表名
表头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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
css部分:
table.tab{
border :1px black solid;
}
table.tab .g1 .c1
{
background-color :Yellow;
width:50px;
}
table.tab .g1 .c2
{
background-color : Lime;
width : 100px;
}
table.tab .g1 .c3{
background-color : Green;
width : 140px;
}
table.tab colgroup.g2{
background:Teal url("http://rotui.net/images/bg.jpg") repeat top center;
width : 200px;
/* IE only start */
/* 非IE的浏览器都不支持非width background以外的定义 */
color : White;
text-align : right;
/* IE only end */
}
table.tab thead th
{
background-color : Black;/*由于colgroup 定义了背景 th没定义会因浏览器不同解析不同*/
/*IE,Opera,Netscape会使用colgroup 定义的背景 MOZ系列的不会非WIN系统浏览未测试 */
color : White;
}
table.tab tfoot td
{
background-color : Gray;
表格的模拟
1、模拟前的建议:
DIV就是DIV 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力

...

　
2、两列多行的数据显示:
两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.
我选择ol来做~是下面演示的是有有序列表~可能你会问我~为什么不用ul呢??
在参考中说到ol:绘制文本的编号列表,ul:绘制文本的项目符号列表简单的说就是ol是有序列表,ul是无序列表
html部分

晚上我没吃饭2-13

今天是中国的情人节,要一个人过2-12

下午朋友来看我2-11

^_^ 发工资拉,2-10

........... ....

运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

晚上我没吃饭2-13

今天是中国的情人节,要一个人过2-12

下午朋友来看我2-11

^_^ 发工资拉,2-10

........... ....

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
CSS部分
ol.news{
width:400px;/*装饰用的~只限显示的数据总宽度 */
list-style-type :none;/*去掉列表数据*/
}
ol.news li{
text-align:right;/* 把文本右对齐,主要的作用是把时间放在右边*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要显示的内容浮动到左边*/
text-align:left;/* 文本左对齐,可选~保证更多的浏览器是左对齐*/
}
运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

晚上我没吃饭2-13

今天是中国的情人节,要一个人过2-12

下午朋友来看我2-11

^_^ 发工资拉,2-10

........... ....

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
另一种方法:
html

[广东]这里没电了

[四川]这里也没电了

[上海]郁闷!同上,没电啊~

[北京]挖哈哈 ^_^ 这里有电~

............

css
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/
}
ul.news2 li span
{
float:right;/*我浮我浮我浮浮浮,我在右边了*/
display : inline;
}
运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

[广东]这里没电了

[四川]这里也没电了

[上海]郁闷!同上,没电啊~

[北京]挖哈哈 ^_^ 这里有电~

............

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
更多的装饰
我们可以加background,border,font等定义~可以把他定义得漂亮点,不过这里的目的已经达到了,漂亮的样式等大家自己去尝试
2、三列多行的数据显示:
这里依然选择文章列表来做演示,选择标签为ol,li,a,address,i.当然,你也可以依照你的文档资料选择如span,b,s等来做

[原创:JS]由浅到深了解JavaScript类
笨红
2-9

[原创:CSS]正确认识html与body
一叶千鸟
2-8

[灌水:泡MM]没有MM的日子怎样过
嗷嗷
2-8

........
....
....

运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

[原创:JS]由浅到深了解JavaScript类
笨红
2-9

[原创:CSS]正确认识html与body
一叶千鸟
2-8

[灌水:泡MM]没有MM的日子怎样过
嗷嗷
2-8

........
....
....

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
CSS部分
ol.art{
list-style-type :none;
}
ol.art li{
clear:both;/*清行*/
}
ol.art li a{
width:500px;/*定义宽度只是发了对齐*/
float:left;display:inline;/*不能路过就浮过吧*/
}
ol.art li address{
width:100px;
font-style : normal;/*中文斜体不是很好看的说*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
运行代码框

XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 »

[原创:JS]由浅到深了解JavaScript类
笨红
2-9

[原创:CSS]正确认识html与body
一叶千鸟
2-8

[灌水:泡MM]没有MM的日子怎样过
嗷嗷
2-8

........
....
....

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
总结
当做到三列时~我发现我已经一步一步的走向我反对的那种模拟了.
HTML4的时代table,table已经成为基本所有的网页设计用来布局的工具, XHTML1.x的时代table的任务只是数据显示,我支持表格的使用,不过不是用来布局的, 要想完全抛弃table,我认为应该等到浏览器们都支持display: table的CSS2才可以
以前文章只是个人看法,在WEB设计中我属于学得晚的,学得菜的,可能里面说的有些不大对,也希望大家能帮我指出来.

收藏分享邀请

		自动登录	找回密码
密码			注册

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

最新评论

相关分类