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

王朝html/css/js·作者佚名 2008-05-19

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

表格中的行

THEAD

表头

TBODY

表的主体

TFOOT

表底

COL

指定基于列的表格默认属性,嵌套的 COL 属性将覆盖 COLGROUP 属性

COLGROUP

指定表格中一列或一组列的默认属性。

TD, TH

单元格

CAPTION

表名

3、基本演示:

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

</colgroup>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

无样式表现:

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

<body>

</colgroup>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

定义CSS样式:

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

/*eg*/

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://webdesign.chinaitlab.com/UploadFiles_8014/200604/20060417151839416.jpg") repeat top center;

width : 200px;

/* IE */

color : White;

text-align : right;

}

table.tab thead th{

background-color : Black;

color : White;

line-height:160%;

}

table.tab tfoot td{

background-color : Gray;

}

</style>

<body>

</colgroup>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

[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://webdesign.chinaitlab.com/UploadFiles_8014/200604/20060417151839416.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模拟表格,偶尔也考虑考虑一下亲和力

<div>

</div>

2、两列多行的数据显示:

两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.

我选择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>

</ol>

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

<body>

<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>

</ol>

</body>

</html>

[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;/* 文本左对齐,可选~保证更多的浏览器是左对齐*/

}

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

<body>

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;/* 文本左对齐,可选~保证更多的浏览器是左对齐*/

}

</style>

<li><a href="#" title="晚上我没吃饭">晚上我没吃饭</a>2-13</li>

<li><a href="#" title="今天是中国的情人节,要一个人过">今天是中国的情人节,要一个人过</a>2-12</li>

<li><a href="#" title="下午朋友来看我">下午朋友来看我</a>2-11</li>

</ol>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另一种方法:

html

<li><span>[广东]</span>这里没电了</li>

<li><span>[四川]</span>这里也没电了</li>

</ul>

css

ul.news2{

width:400px;

list-style-type :none;

}

ul.news2 li{

text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/

}

ul.news2 li span

{

float:right;/*我浮我浮我浮浮浮,我在右边了*/

display : inline;

}

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

ul.news2{

width:400px;

list-style-type :none;

}

ul.news2 li{

text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/

}

ul.news2 li span

{

float:right;/*我浮我浮我浮浮浮,我在右边了*/

display : inline;

}

</style>

<body>

<li><span>[广东]</span>这里没电了</li>

<li><span>[四川]</span>这里也没电了</li>

</ul>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

更多的装饰

我们可以加background,border,font等定义~可以把他定义得漂亮点,不过这里的目的已经达到了,漂亮的样式等大家自己去尝试

2、三列多行的数据显示:

这里依然选择文章列表来做演示,选择标签为ol,li,a,address,i.当然,你也可以依照你的文档资料选择如span,b,s等来做

<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>

</ol>

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

<body>

<li><a href="#" title="...">[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li>

<li><a href="#" title="...">[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li>

<li><a href="#" title="...">[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li>

</ol>

</body>

</html>

[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;

}

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

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

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;

}

</style>

<body>

<li><a href="#" title="...">[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li>

<li><a href="#" title="...">[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li>

<li><a href="#" title="...">[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li>

</ol>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

总结

当做到三列时~我发现我已经一步一步的走向我反对的那种模拟了.

HTML4的时代table,table已经成为基本所有的网页设计用来布局的工具, XHTML1.x的时代table的任务只是数据显示,我支持表格的使用,不过不是用来布局的, 要想完全抛弃table,我认为应该等到浏览器们都支持display: table的CSS2才可以

以前文章只是个人看法,在WEB设计中我属于学得晚的,学得菜的,可能里面说的有些不大对,也希望大家能帮我指出来.