table布局
2018-03-11 本文已影响7人
丶灰太狼他叔
关于table布局的问题，首先height必须要给一个固定的px值，然后就是td一个总的colspan值，下面td设置colspan的值来设置宽度。不过这一行总的colspan的值加起来等于td的colspan的值。
一个例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table布局</title>
<style type="text/css">
td {
text-align: center;
}
</style>
</head>
<body marginwidth="0px" marginheight="0px">
<table width="700px" height="650px" style="background-color: aqua">
<tr>
<td colspan="10" width="100%" height="20%" style="background-color: chartreuse">这是头部</td>
</tr>
<tr>
<td colspan="2" width="20%" height="40%" style="background-color: antiquewhite">左菜单</td>
<td colspan="3" width="30%" height="40%" style="background-color: coral">左内容</td>
<td colspan="2" width="20%" height="40%" style="background-color: cornflowerblue">右菜单</td>
<td colspan="3" width="30%" height="40%" style="background-color: coral">右内容</td>
</tr>
<tr>
<td width="20%" height="10%" style="background-color: crimson">公司地址：</td>
<td width="80%" colspan="9" height="20%" style="background-color: crimson">上海市</td>
</tr>
<tr>
<td colspan="2" height="10%" style="background-color: crimson">公司地址：</td>
<td colspan="3" height="20%" style="background-color: crimson">上海市</td>
<td colspan="2" height="20%" style="background-color: crimson">上海市</td>
<td colspan="3" height="20%" style="background-color: crimson">上海市</td>
</tr>
<tr>
<td colspan="10" height="20%" style="background-color: crimson">这是底部</td>
</tr>
</table>
</body>
</html>
效果图：
table.png
