如何在表格中居中输入表格？ HTML答案

【问题标题】：How to center input of form in table? HTML如何在表格中居中输入表格？ HTML
【发布时间】：2015-09-30 09:11:03
【问题描述】：

我想将输入放在一行中。

<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>

【问题讨论】：

我认为“行”是指列？
不要使用表格进行布局，还有更好的选择。至少，不要使用单个单元格表格。
@Siguza 是的，在列中，

标签： html css forms html-table

【解决方案1】：

我认为您正试图让所有这些都在中心对齐。为此，我们必须使用 "tr" 标记定义 HTML 表格中的一行和 "th" 标签在 HTML 表格中定义标题单元格。试试下面的代码：

<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>

我们还使用表格的对齐属性和我们创建的新行来获得您想要的。

【讨论】：

【解决方案2】：

我认为你有 3 个选择：

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

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

【讨论】：

【解决方案3】：

这样做：

<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>

【讨论】：