在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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的思想,结构与表现的分离,不再为元素的属性做演示
<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>
无样式表现:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
定义CSS样式:
运行代码框
[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;
出处:蓝色理想
责任编辑:moby
上一页 下一页 如何用CSS定义表格与模拟表格 [2]
◎进入论坛网站综合、网页制作版块参加讨论
|