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

来源：互联网 编辑：若水 时间：2008-03-22

在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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的思想,结构与表现的分离,不再为元素的属性做演示

无样式表现:

运行代码框
<!DOCTYPE <a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.1//EN" "http://www.w3.org/TR/x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11/DTD/x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>11.dtd"> <<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.5ibk.cn/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>"> <head> <title>X<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title> <meta http-equiv="Content-Type" content="text/<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; charset=gb2312" /> <meta name="KEY<a href="http://www.5ibk.cn/bkhtml/c117/" title="Word教程">word</a>s" content="<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>,x<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" /> <meta name="DEscription" content="<a href="http://www.5ibk.cn/bkhtml/c23/" title="CSS教程">CSS</a>" /> <meta name="author" content="RotUI" /> <meta content="all" name="robots" /> <link rel="start" href="http://www.rotui.net" title="Home" /> <body> <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> </body> </<a href="http://www.5ibk.cn/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>> </div> <div class="cupage"> <a href='#'>上一页</a><strong>1</strong><a href='3751_2.html'>2</a> <a href='3751_3.html'>3</a> <a href='3751_4.html'>4</a> <a href='3751_5.html'>5</a> <a href='3751_6.html'>6</a> <a href='3751_7.html'>7</a> <a href='3751_2.html'>下一页</a> </div>  <div class="actbar"> <span>[<a href="/plus/stow.php?arcID=3751">收藏</a>]</span> <span>[<a href="/plus/recommend.php?arcID=3751">推荐</a>]</span> <span>[<a href="/plus/feedback.php?arcID=3751">评论</a>]</span> <span>[<a href="#" onClick="window.print();">打印</a>]</span> <span>[<a href="#" onClick="window.close();">关闭</a>]</span> </div>  <div class="context"> <div id='digg3751' class='diggArea'> <div class='diggNum'>0</div> <div class="diggLink"><a href="javascript:Digg('digg',3751);">顶一下</a></div> </div> <div style="float:left; margin-left:20px;"> 上一篇：<a href='/soft/college/CSS/jichujiaocheng/20080322/3747.html'>CSS中expression使用简介</a> <br /> 下一篇：<a href='/soft/college/CSS/jichujiaocheng/20080322/3752.html'>搞定CSS SPAN和DIV的区别</a> </div> </div>  <div class="ads"> <script type="text/javascript" src="../../../../../../../../../../ad/news_down.js"></script> </div>  <div class="tuwen"> <dl> <table width='100%' border='0' cellspacing='0' cellpadding='0'> <tr> <td width='20%'> </td> <td width='20%'> </td> <td width='20%'> </td> <td width='20%'> </td> <td width='20%'> </td> </tr> </table> </dl> </div> </div> <div class="floatclear"></div>  <div class="comment">  <div class="commenttitle"> <div class="title"><strong>最新评论</strong>共有 0 位网友发表了评论 </div> <div class="gotopost"><a href="/plus/feedback.php?arcID=3751">查看所有评论</a></div> </div>  <div class="commentbox"> <script src="/plus/feedback_js.php?arcID=3751"></script> </div>  <div class="posttitle"><strong>发表评论</strong></div>  <form action="/plus/feedback.php?action=send" method="post" name="feedback"> <input type="hidden" name="arcID" value="3751"> <div class="postbox"> <div class="txtbox"> <strong>评论内容：</strong>不能超过250字，需审核，请自觉遵守互联网相关政策法规。 <textarea name="msg" cols="60" rows="6">

用户名： 密码：

匿名?

热点关注