如何在 table 中将表单输入居中？ HTML

Question

我想将输入放在一行中。

<table border='1' cellpadding="25" style='border-collapse: collapse;border-color: silver;'> 
<tr style='font-weight: bold;'>
<td width='350' align='center'>
<h2>Register:</h2><br>
Login: <input type="text" name="login" maxlength="20" size="25" /><br>
Password: <input type="password" name="password" size="25" maxlength="32" /><br>
Repeat password: <input type="password" name="password2" size="25" maxlength="32" /><br><br>
</td></tr></table>

Answer 1

我认为你试图让所有这些在 center.For 中对齐，我们必须使用 "tr" 标签定义一行HTML table 和 "th" 标签在 HTML table.Try 下面定义了一个 header 单元格代码：

<html>
<body>
<h2 align="center">Register</h2>
    <table align="center">
        <tr>
            <td>Login</td>      
            <td><input type="text" name="login" align="middle"/></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="pass" align="middle"/></td>
        </tr>
        <tr>
            <td>Repeat Password</td>
            <td><input type="password" name="rpass" align="middle"/></td>
        </tr>   

    </table>

我们还使用 table 的对齐方式属性和我们创建的新行来满足您的需求。

Answer 2

这样做：

<table border='1' cellpadding="25" style='border-collapse: collapse;border-color: silver;'> 
<tr style='font-weight: bold;'>
<td style="width: 300px; text-align: right;">
Login: 
</td>
<td style="width: 300px; text-align: left;">
<input type="text" name="login" maxlength="20" size="25" />
</td>
</tr>

<tr style='font-weight: bold;'>
<td style="width: 300px; text-align: right;">
Password:
</td>
<td style="width: 300px; text-align: left;">
<input type="password" name="password" size="25" maxlength="32" />
</td>
</tr>
</table>

Answer 3

我认为你有 3 个选择：

使用 CSS & position:relative 并使用 left' of eachinputs`，那根本无效。
再添加一些 HTML，我的意思是将每个输入放在单独的 td 上。 这是我认为的最佳选择，更好的是你把 label / text' of each input 也放在另一个 td 上。
使用 div（例如）而不是 td 以获得更多控制并使用 CSS。

我强烈建议您使用选项 #2，希望对您有所帮助。

如何在 table 中将表单输入居中？ HTML

How to center input of form in table? HTML

html

css

forms

html-table