在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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>
无样式表现:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="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 xmlns="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("http://rotui.net/images/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("http://rotu[1] [url=http://www.chinamx.com.cn/Article/websj/css/200605/20060516202802_2061_2.html][2] [3] 下一页
