当前位置 - 股票行情交易網 - 裝修設計 - div css 怎麽做這種表格,單獨做出這壹塊就行

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>