table布局

最新推荐文章于 2023-01-16 14:38:07 发布

原创最新推荐文章于 2023-01-16 14:38:07 发布 · 733 阅读

0 ·

CC 4.0 BY-SA版权

现在想布局一个左边是树，左边是表格形式的表单

1、先要一个table是一行两列，第一列占10%，第二列占90%

下面在第二个td中再定义一个table,而不能再td中写tr来分隔，实现不了

2、在第二个紧邻table的标签后面定义一个form，不能在td和table之间，也就是第二个table之前定义，那样form撑不开父元素td

具体代码

<html>
<body>
<table align="center" width="100%" height="100%" border=1 bordercolor="#00ff99">

<tr>
<td width="10%">
</td>
<td width="90%">

form不能放在第二个table之上
<table align="center" width="100%" height="100%" border=1 bordercolor="#00ff99"> 第二个table
<form height="100%">
<tr height="20%">
<td colspan="8" align="center" >人员基本信息</td>

</tr>

<tr height="5%">
<td width="12.5%">姓名：</td>
<td width="12.5%"><input type="text"/></td>
<td width="12.5%">年龄：</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>

</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</form>
</table>

</td>
</tr>
</table>
</body>
</html>

若是下代码，初始是14行，9列

<html>
<body>
<table align="center" width="100%" height="100%" border=1 bordercolor="#00ff99">

<tr>
<td rowspan="14"></td> 原先是9列，但是一合并却是10列了，反而会多出一列，如果把第二行再rowspan=14,那么会出现11列了
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td ></td>
</tr>
</table>
</body>
</html>