如何用CSS定义表格与模拟表格 -css,网页设计-iyit.net-易特网络技术！

网站建设　下载中心　 社区论坛　信息公告 MY小屋

联系我们
设为首页
加入收藏

当前位置：首页>>网页设计>>Html/Css>>正文

注:打开慢时请稍等

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

日期：2007-3-29 12:51:36 来源：iyit.net录入点击：

【参加讨论】

在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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 html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html <a href=/Html/bckf/xml/index.html target=_blank>xml</a>ns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="KEYWords" content="css,xhtml" /> <meta name="DEscription" content="CSS" /> <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> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

定义CSS样式:

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html <a href=/Html/bckf/xml/index.html target=_blank>xml</a>ns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="KEYWords" content="css,xhtml" /> <meta name="DEscription" content="CSS" /> <meta name="author" content="RotUI" /> <meta content="all" name="robots" /> <link rel="start" href="http://www.rotui.net" title="Home" /> <style type="text/css"> /*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("/Files/BeyondPic/2007-3/29/bg.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> <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> </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("/Files/BeyondPic/2007-3/29/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;

本新闻共2页,当前在第1页 1 2

编辑：iyit.net　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：div+css布局漫谈
下一篇：没有了
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

　相关文章

div+css布局漫谈	meta标签使用详解	网页最简短的拖动对象代码实例演示
多种网页弹出窗口代码防拦截弹出窗口代	随滚动条移动的DIV层	CSS中的滑动门技术
网页制作入门教程：关于css样式表	合理的网页设计具有哪些特征	从基础到精通：CSS实用教程（三）
从基础到精通：CSS实用教程（二）	从基础到精通：CSS实用教程（一）	CSS样式表：详细介绍IE7新支持的选择器
用CSS设计网页艺术字效果	页面控制常见问题及解决办法	网页设计中HTML常犯的五个错误
教你用好活动字幕标记--Marquee	用Dreamweaver8搞定web标准	用Dreamweaver设计限时自动关闭的网页
用Dreamweaver制作细边表格	用falsh制作黑客帝国数字流	常用JS网页广告代码，网页特效
百度的首页简单吗？新浪的首页复杂吗？	Dreamweaver网页中实用的制作技巧	Dreamweaver经典问题大搜罗