<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabel布局</title>
</head>
<body style="margin: 0">
<table style="background: green;height: 708px;width: 100%">
<tr style="background: red"><td colspan="3" style="height: 10%;text-align: center;"> 顶部 </td> </tr>
<tr style="background: #f7f7f7">
<td style="width: 20%">
<ul style="list-style-type: none;">
<li><a href="http://www.baidu.com" target="myframe"><img src="0.jpg" height="50" width="100"></a></li>
<li><a href="http://www.hao123.com" target="myframe"><img src="0.jpg" height="50" width="100"></a></li>
</ul>
</td>
<td style="background: #f8f8f8" colspan="2">
<iframe src="http://www.h123.com" name="myframe" width="100%" height="100%"></iframe>
</td>
</tr>
<tr style="background: red"><td colspan="3" style="height: 10%;text-align: center;">底部</td></tr>
</table>
</body>
</html>
原文：http://www.cnblogs.com/houweidong/p/5837922.html