css基本样式
<style type="text/css">
table {
height: 400px;
width: 720px;
}
table td {
width: 100px;
height: 50px;
border:1px solid black;
}
</style>
html结构样式
<table cellspacing="0" cellspadding="0">
<tbody>
<tr>
<td colspan="6">1</td>
<td>1</td>
</tr>
<td>1</td>
<td colspan="2">1</td>
<td>1</td>
<td colspan="2">1</td>
<td>1</td>
<tr>
<td>2</td>
<td>3</td>
<td colspan="3">3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">1</td>
<td>1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td rowspan=2>1</td>
<td rowspan=2 colspan="2">1</td>
<td rowspan=2>1</td>
<td rowspan=2 colspan="2">1</td>
<td rowspan=2>1</td>
</tr>
<tr></tr>
<tr>
<td>1</td>
<td colspan="6">1</td>
</tr>
</tbody>
</table>
2024-07-20 广告
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
table {
position: relative;
margin: auto;
border: 1px solid black;
height: 400px;
width: 720px;
border-spacing: 0px;
border-collapse: collapse;
}
table tr td {
border: 1px solid black;
width: 100px;
height: 50px;
}
table tr {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="6"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2" colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2" colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
首先,按你这个布局必须要用table才方便,用Dreamweaver几分钟就可以画出来。代码在附件中,宽度和高度自己随意调整。