div css 怎么做这种表格,单独做出这一块就行
有2种,我帮你都写出来吧。总体效果如下
代码
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
.zt{width:500px; height:auto; float:left;}
.tp{width:150px; height:90px; float:left;}
.bt{float:left; width:100px; height:90px;}
.xbt{width:100px; height:40px; line-height:40px;}
</style>
</head>
<body>
<table width="230" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2">图片</td>
<td>姓名</td>
<td rowspan="2">图片</td>
<td>姓名</td>
</tr>
<tr>
<td>学校</td>
<td>学校</td>
</tr>
<tr>
<td rowspan="2">图片</td>
<td>姓名</td>
<td rowspan="2">图片</td>
<td>姓名</td>
</tr>
<tr>
<td>学校</td>
<td>学校</td>
</tr>
<tr>
<td rowspan="2">图片</td>
<td>姓名</td>
<td rowspan="2">图片</td>
<td>姓名</td>
</tr>
<tr>
<td>学校</td>
<td>学校</td>
</tr>
</table>
<div class="zt">
<div class="tp">图片</div>
<dl class="bt">
<dd class="xbt">姓名</dd>
<dd class="xbt">学校</dd>
</dl>
<div class="tp">图片</div>
<dl class="bt">
<dd class="xbt">姓名</dd>
<dd class="xbt">学校</dd>
</dl>
<div class="tp">图片</div>
<dl class="bt">
<dd class="xbt">姓名</dd>
<dd class="xbt">学校</dd>
</dl>
<div class="tp">图片</div>
<dl class="bt">
<dd class="xbt">姓名</dd>
<dd class="xbt">学校</dd>
</dl>
<div class="tp">图片</div>
<dl class="bt">
<dd class="xbt">姓名</dd>
<dd class="xbt">学校</dd>
</dl>
<div class="tp">图片</div>
<dl class="bt">
<dd class="xbt">姓名</dd>
<dd class="xbt">学校</dd>
</dl>
</div>
</body>
</html>
div#gran{
width:500px;
height:500px;
border:1px solid green;
}
div#izqui{
widht:200px;
height:100%;
float:left;
}
table#foto{
width:100px;
height:100px;
border:1px solid;
}
</style>
<div id="gran">
<div id="izqui">
<table>
<tr>
<td><table id="foto">
<tr><td></td>
</tr></table>
</td>
<td>
<table>
<tr>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="dere">
<table>
<tr>
<td><table id="foto">
<tr><td></td>
</tr></table>
</td>
<td>
<table>
<tr>
<td>内容</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>