在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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;
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器
