为什么这个表格中运行结果按钮在第一行 <table id="67"> <tr id="56"> <td>请输入用户名</td> <td><input type="text" name="username" id="23"></td> </tr> <tr> <td>请输入密码</td> <td><input type="password" name="password" id="45"></td> </tr> <tr align="center"> <input type="button" value="提交" @click="m3" id="12"> </tr> </table>
时间: 2023-10-05 09:05:24 浏览: 38
这是因为运行结果按钮所在的 `<input>` 标签没有被包含在任何一个 `<td>` 标签中,而是直接放在了 `<tr>` 标签中。在表格中,`<td>` 标签用于定义表格中的单元格,而 `<tr>` 标签用于定义表格中的行,`<input>` 标签应该被包含在一个单元格中。你可以将代码修改成如下形式,使得运行结果按钮出现在第三行的第二个单元格中:
```
<table id="67">
<tr id="56">
<td>请输入用户名</td>
<td><input type="text" name="username" id="23"></td>
</tr>
<tr>
<td>请输入密码</td>
<td><input type="password" name="password" id="45"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="提交" @click="m3" id="12"></td>
</tr>
</table>
```
在第三行中使用了 `colspan` 属性,将运行结果按钮所在的单元格横跨了两个单元格。这样可以让按钮在表格中居中,并且与其他单元格对齐。
相关问题
<table border="1"> <tr><td><input type="radio" name="vote"></td><td>张三<td></tr> <tr><td><input type="radio" name="vote"></td><td>李四<td></tr> <tr><td><input type="radio" name="vote"></td><td>王五<td></tr> <tr><td><input type="radio" name="vote"></td><td>赵六<td></tr> </table><br>为什么会多出一列
这段 HTML 代码中出现多出一列的原因是因为在第 3 行代码中, `<td>` 标签没有正确闭合,导致 HTML 解析器将第 4 行代码中的 `<td>` 标签作为第 3 行代码的子节点,从而导致第 3 行代码多出一个列。
正确的代码应该是:
```
<table border="1">
<tr>
<td><input type="radio" name="vote"></td>
<td>张三</td>
</tr>
<tr>
<td><input type="radio" name="vote"></td>
<td>李四</td>
</tr>
<tr>
<td><input type="radio" name="vote"></td>
<td>王五</td>
</tr>
<tr>
<td><input type="radio" name="vote"></td>
<td>赵六</td>
</tr>
</table><br>
```
这样就不会出现多出一列的情况了。
修改下方html代码,让title占据两行表格 <html> <head> <meta charset="UTF-8"> <style> html{background-color: white;}table{text-align:center;border-collapse:collapse;border:1px solid black;}td{word-break:break-all;border:1px solid black;}td{padding:6px;padding-left: 15px;padding-right: 15px;border:1px solid black;} </style> </head> <table> <tbody> <tr> <td colspan="3" ><span id=0>title</span></td> </tr> <tr> <td colspan="0"><span id=5>LOADING PORT</span></td> <td colspan="0"><span id=6>NINGBO</span></td> <td colspan="0"><span id=7>DESDRINATION</span></td> </tr> <tr> </tbody> </table> </html>
修改后的代码如下:
```html
<html>
<head>
<meta charset="UTF-8">
<style>
html{background-color: white;}
table{text-align:center;border-collapse:collapse;border:1px solid black;}
td{word-break:break-all;border:1px solid black;}
td{padding:6px;padding-left: 15px;padding-right: 15px;border:1px solid black;}
</style>
</head>
<table>
<tbody>
<tr>
<td rowspan="2" ><span id="0">title</span></td>
<td colspan="0"><span id="5">LOADING PORT</span></td>
<td colspan="0"><span id="6">NINGBO</span></td>
</tr>
<tr>
<td colspan="0"><span id="7">DESTINATION</span></td>
<td></td>
</tr>
</tbody>
</table>
</html>
```
我将`<td colspan="3">`改成了`<td rowspan="2">`,这样就可以让标题占据两行表格了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
html <td(l)align=center>情况登记 姓名: (2) 密码: <INPUT size="20" _(3) value="pwd"> 性别: <INPUT name="sex" type=radio> 男<INPUT name="sex" type=radio>女 <INPUT (4)_value=”提 交“><INPUT type="reset"(5)></form>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)