用 div 来做3行、中间那行是2列的表格，兼容 FF3。还有问题需要详细解决。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div Tables</title>
<style type="text/css">
.clearDiv {
clear: both;
}
.purpleTable{
margin-left: auto; margin-right: auto;
width:700px;
}
.purpleTable .CountHead {
background-color: #E8E5F8;
border: 1px solid #CAC4E8;
text-align: center;
font-weight: bold;
}
.purpleTable .CountBodyLeft {
border-left-color: #CAC4E8;
border-left-width: 1px;
border-left-style: solid;
float: left;
width: 70%;
background-color: #FFFFFF;
text-align: left;
}
.purpleTable .CountBodyRight {
float: right;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CAC4E8;
width: 29.7%;
text-align: right;
background-color: #FFFFFF;
}
.purpleTable .CountFoot {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #CAC4E8;
border-bottom-color: #CAC4E8;
border-left-color: #CAC4E8;
background-color: #E8E5F8;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.greenTable{
margin-left: auto; margin-right: auto;
width:700px;
}
.greenTable .CountHead {
background-color: #EEF7E8;
border: 1px solid #B3D997;
text-align: center;
font-weight: bold;
}
.greenTable .CountBodyLeft {
border-left-color: #B3D997;
border-left-width: 1px;
border-left-style: solid;
float: left;
width: 70%;
background-color: #FFFFFF;
text-align: left;
}
.greenTable .CountBodyRight {
float: right;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #B3D997;
width: 29.7%;
text-align: right;
background-color: #FFFFFF;
}
.greenTable .CountFoot {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #B3D997;
border-bottom-color: #B3D997;
border-left-color: #B3D997;
background-color: #EEF7E8;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
height: 20px; /*在FF3下使用height会使下一个CountHead覆盖这个CountFoot*/
}
.redTable{
margin-left: auto; margin-right: auto;
width:700px;
}
.redTable .CountHead {
background-color: #FEC5CC;
border: 1px solid #F5787B;
text-align: center;
font-weight: bold;
}
.redTable .CountBodyLeft {
border-left-color: #F5787B;
border-left-width: 1px;
border-left-style: solid;
float: left;
width: 70%;
background-color: #FFFFFF;
text-align: left;
}
.redTable .CountBodyRight {
float: right;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #F5787B;
width: 29.7%;
text-align: right;
background-color: #FFFFFF;
}
.redTable .CountFoot {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #F5787B;
border-bottom-color: #F5787B;
border-left-color: #F5787B;
background-color: #FEC5CC;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.CenterDiv {
text-align: center;
}
</style>
<div class="CenterDiv">
<div class="purpleTable">
<div class="CountHead">CountHead</div>
<div class="CountBodyLeft">1</div>
<div class="CountBodyRight">CountBodyRight</div>
<div class="CountBodyLeft">2</div>
<div class="CountBodyRight">CountBodyRight</div>
<div class="CountBodyLeft">3</div>
<div class="CountBodyRight">CountBodyRight</div>
<div class="CountFoot">CountFoot</div>
</div>
</div>
<hr>
<div class="CenterDiv">
<div class="greenTable">
<div class="CountHead">CountHead</div>
<div class="CountBodyLeft">CountBodyLeft</div>
<div class="CountBodyRight">CountBodyRight</div>
<div class="CountBodyLeft">CountBodyLeft</div>
<div class="CountBodyRight">CountBodyRight</div>
<div class="ClearDiv"></div><!--这个有时候加了有用，有时候没用，希望有人能解释一下-->
<div class="CountFoot">CountFoot</div>
</div>
</div>
<hr>
<div class="CenterDiv">
<div class="redTable">
<div class="CountHead">CountHead</div>
<div class="CountBodyLeft">CountBodyLeft</div>
<div class="CountBodyRight">CountBodyRight</div>
<div class="CountFoot"> </div>
</div>
</div>
<hr>
</body>
</html>