在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用DIV可以模拟出绝大部分以前的表格布局跟数据显示,在后面会讲些代替表格的显示方式.
表格应用
表格的基本标签
- 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 虽然很不情愿.
分析表格的基本标签
-
table
- table元素定义一个表格的开始 tr
- 表格中的行 THEAD
- 表头 TBODY
- 表的主体 TFOOT
- 表底 COL
- 指定基于列的表格默认属性,嵌套的 COL 属性将覆盖 COLGROUP 属性 COLGROUP
- 指定表格中一列或一组列的默认属性。 TD, TH
- 单元格 CAPTION
- 表名
基本演示
不想过多的讲表格,这是一个比较完整的表格的演示,同时继承XHTML的思想,结构与表现的分离,不再为元素的属性做演示
-
代码
-
<
table
class
="tab"
>
<
caption
>
表名
</
caption
>
<
colgroup
class
="g1"
span
="3"
>
<
col
class
="c1"
/>
<
col
class
="c2"
/>
<
col
class
="c3"
/>
</
colgroup
>
<
colgroup
class
="g2"
span
="1"
>
</
colgroup
>
<
thead
>
<
tr
>
<
th
>
表头1
</
th
>
<
th
>
表头2
</
th
>
<
th
>
表头3
</
th
>
<
th
>
表头4
</
th
>
</
tr
>
</
thead
>
<
tfoot
>
<
tr
>
<
td
>
表底1
</
td
>
<
td
>
表底2
</
td
>
<
td
>
表底3
</
td
>
<
td
>
表底4
</
td
>
</
tr
>
</
tfoot
>
<
tbody
>
<
tr
>
<
td
>
行1列1
</
td
>
<
td
>
行1列2
</
td
>
<
td
>
行1列3
</
td
>
<
td
>
行1列4
</
td
>
</
tr
>
<
tr
>
<
td
>
行2列1
</
td
>
<
td
>
行2列2
</
td
>
<
td
>
行2列3
</
td
>
<
td
>
行2列4
</
td
>
</
tr
>
<
tr
>
<
td
>
行3列1
</
td
>
<
td
>
行3列2
</
td
>
<
td
>
行3列3
</
td
>
<
td
>
行3列4
</
td
>
</
tr
>
<
tr
>
<
td
>
行4列1
</
td
>
<
td
>
行4列2
</
td
>
<
td
>
行4列3
</
td
>
<
td
>
行4列4
</
td
>
</
tr
>
</
tbody
>
</
table
>
- 无样式表现
-
表名 表头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
定义基本样式
-
css部分表名 表头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 
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("/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;}
表格的模拟
模拟前的建议
div就是div 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力
<div>
<div>
<div>...</div>
</div>
</div>
两列多行的数据显示
两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.
我选择ol来做~是下面演示的是有有序列表~可能你会问我~为什么不用ul呢??
在参考中说到ol:绘制文本的编号列表,ul:绘制文本的项目符号列表 简单的说就是ol是有序列表,ul是无序列表
-
html部分
-
<
ol
>
<
li
><
a
href
="#"
title
="晚上我没吃饭"
>
晚上我没吃饭
</
a
>
2-13
</
li
>
<
li
><
a
href
="#"
title
="今天是中国的情人节,要一个人过"
>
今天是中国的情人节,要一个人过
</
a
>
2-12
</
li
>
<
li
><
a
href
="#"
title
="下午朋友来看我"
>
下午朋友来看我
</
a
>
2-11
</
li
>
<
li
><
a
href
="#"
title
="^_^ 发工资拉"
>
^_^ 发工资拉,
</
a
>
2-10
</
li
>
<
li
><
a
href
="#"
title
="..."
>
...........
</
a
>
....
</
li
>
</
ol
>
-
- 晚上我没吃饭2-13
- 今天是中国的情人节,要一个人过2-12
- 下午朋友来看我2-11
- ^_^ 发工资拉,2-10
- ........... ....
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;/**//* 文本左对齐,可选~保证更多的浏览器是左对齐*/}
-
- 晚上我没吃饭2-13
- 今天是中国的情人节,要一个人过2-12
- 下午朋友来看我2-11
- ^_^ 发工资拉,2-10
- ........... ....
另一种方法
-
html
CSS
<
ul
class
="news2"
>
<
li
><
span
>
[广东]
</
span
>
这里没电了
</
li
>
<
li
><
span
>
[四川]
</
span
>
这里也没电了
</
li
>
<
li
><
span
>
[上海]
</
span
>
郁闷!同上,没电啊~
</
li
>
<
li
><
span
>
[北京]
</
span
>
挖哈哈 ^_^ 这里有电~
</
li
>
<
li
><
span
>
....
</
span
>
........
</
li
>
</
ul
>
ul.news2
{...}
{ width:400px; list-style-type :none;}
ul.news2 li
{...}
{ text-align:left;/**//*这回向左对齐,因为我们要把span浮到右边*/}
ul.news2 li span
{...}
{ float:right;/**//*我浮我浮我浮浮浮,我在右边了*/ display : inline;}
-
- [广东]这里没电了
- [四川]这里也没电了
- [上海]郁闷!同上,没电啊~
- [北京]挖哈哈 ^_^ 这里有电~
- ............
更有的装饰
- 我们可以加background,border,font等定义~可以把他定义得漂亮点,不过这里的目的已经达到了,漂亮的样式等大家自己去尝试
三列多行的数据显示
这里依然选择文章列表来做演示,选择标签为ol,li,a,address,i.当然,你也可以依照你的文档资料选择如span,b,s等来做
-
HTML部分
-
<
ol
class
="art"
>
<
li
><
a
herf
="#"
title
="..."
>
[原创:JS]由浅到深了解JavaScript类
</
a
><
address
>
笨红
</
address
><
i
>
2-9
</
i
></
li
>
<
li
><
a
herf
="#"
title
="..."
>
[原创:CSS]正确认识html与body
</
a
><
address
>
一叶千鸟
</
address
><
i
>
2-8
</
i
></
li
>
<
li
><
a
herf
="#"
title
="..."
>
[灌水:泡MM]没有MM的日子怎样过
</
a
><
address
>
嗷嗷
</
address
><
i
>
2-8
</
i
></
li
>
<
li
><
a
herf
="#"
title
="..."
>
........
</
a
><
address
>
....
</
address
><
i
>
....
</
i
></
li
>
</
ol
>
-
- [原创:JS]由浅到深了解JavaScript类 笨红 2-9
- [原创:CSS]正确认识html与body 一叶千鸟 2-8
- [灌水:泡MM]没有MM的日子怎样过 嗷嗷 2-8
- ........ .... ....
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;}
-
- [原创:JS]由浅到深了解JavaScript类 笨红 2-9
- [原创:CSS]正确认识html与body 一叶千鸟 2-8
- [灌水:泡MM]没有MM的日子怎样过 嗷嗷 2-8
- ........ .... ....
总结
当做到三列时~我发现我已经一步一步的走向我反对的那种模拟了.
HTML4的时代table,table已经成为基本所有的网页设计用来布局的工具, XHTML1.x的时代table的任务只是数据显示,我支持表格的使用,不过不是用来布局的, 要想完全抛弃table,我认为应该等到浏览器们都支持display: table的CSS2才可以
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
